关于前端:海康h5player添加视频加载中及加载失败图片

海康视频没有自带的 loading 及加载失败成果，上面咱们在视频加载胜利之前增加 loading 成果，在视频加载失败之后增加视频加载失败图片
在海康自带的办法视频预览 realplay 办法中增加：

// 视频预览 === 海康
realplay (playURL, index1) {
    // 视频增加加载中图片
    const id = "player-container-" + index1
    var d1 = document.getElementById(id) // 获取 div 元素
    d1.childNodes.forEach(item => {if (item.nodeName == ''|| item.nodeName =='IMG') {d1.removeChild(item)
        }
    })
    var im = document.createElement("img") // 创立图片
    im.src = './image/loadingBlue.png'
    // 图片设置成和 div 一样大小
    const divHeightNum = d1.style.height.slice(0, d1.style.height.length - 2)
    const imgHeightNum = divHeightNum * 0.8
    im.style.width = imgHeightNum + 'px'
    im.style.height = imgHeightNum + 'px'
    im.style.position = "absolute"
    im.style.top = '50%'
    im.style.left = '50%'
    const positionNum = (imgHeightNum / 2) - imgHeightNum
    im.style.marginLeft = positionNum + 'px'
    im.style.marginTop = positionNum + 'px'
    d1.appendChild(im)    // 图片挂载到 div 上
                    
    this.mode = 0  // 解码形式：0 一般模式 1 高级模式 插件更新后用一般模式能够自解硬码，性能更好
    const {player, mode, urls} = this,
                        
    index = player.currentWindowIndex
    // playURL = this.realplay
                        
    player.JS_Play(playURL, { playURL, mode}, index1).then(() => {
        // 视频加载胜利删除加载中 img
        d1.removeChild(d1.childNodes[7])
        console.log('realplay success')
    },
    e => { 
        // 视频加载失败图片批改为加载失败 img
        im.src = './image/loadingFailBlue.png'
        console.error(e)
    })
}

如果增加了视频宫格切换须要在点击切换时增加代码删除上次宫格中可能展现进去的加载失败图片：

// 切换分屏删除之前分屏加载中及加载失败图片
const splitScreenList = ['player-container-0', 'player-container-1', 'player-container-2', 'player-container-3','player-container-4', 'player-container-5', 'player-container-6', 'player-container-7', 'player-container-8']
splitScreenList.forEach((item, index) => {document.getElementById(item).childNodes.forEach(item1 => {if (item1.nodeName == null || item1.nodeName == 'IMG') {document.getElementById(item).removeChild(item1)
        }
    })
})