海康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)
        }
    })
})