js video添加错误提示

首先获取video元素(每个video元素都有一个父元素<p></p>)

const elevideoArr = document.getElementsByTagName('video')

遍历video元素，并监听error事件，添加错误提示

    for (let i = 0; i < elevideoArr.length; i++) {
          if (elevideoArr[i]) {
              elevideoArr[i].addEventListener('error', function() { // 播放开始执行的函数
                 console.log('error')
                 const bg = elevideoArr[i]['parentNode']
                 elevideoArr[i].setAttribute('controls', false)
                 var img = document.createElement('img')
                 img.src = elevideoArr[i].getAttribute('poster')
                 img.className = 'error_img'
                 bg.appendChild(img)
                 var div = document.createElement('div')
                 div.innerHTML = '看看别的，视频不见了~'
                 div.className = 'error_tips'
                 bg.appendChild(div)
              })
          }
        }

css 样式设置(lang="stylus")

p
  position relative
  video
     display block
     margin 0px auto 12px
     width 686px
     height 386px
  .error_img
    position absolute
    left calc(50% - 343px)
    top 0px
    width 686px
    height 386px
 .error_tips
    position absolute
    left calc(50% - 343px)
    top 0px
     width 686px
     height 386px
     background rgba(0,0,0,0.6)
     display flex
     align-items center
     justify-content center
     color #FFFFFF
     z-index 10000