h5集成腾讯云播放器tcplayer遇到的坑

腾讯云播放器文档写的真的是一言难尽，对h5移动端来说相当不友好，而且bug众多，要不是业务需求，我绝对会放弃，但是没办法，只能自己想办法解决

整体大致页面

<template>
  <div class="video-container">
    <video id="xgplayer" class="video-player" playsinline webkit-playsinline ref="videoDom">

    </video>
    <!-- 半屏退出 -->
    <div class="leftBtnAction" @click="leftBtnActionFn" v-show="isFullscreen === false" :style="fullBtnStyle">
      <img src="../assets/img/mx_video_back.png" alt="" />
    </div>
    <!-- 半屏阴影 -->
    <div class="exitRotateFullscreenMask" v-show="FullscreenMask" :style="fullBtnStyleMask"></div>
    <!-- 全屏退出 -->
    <div class="leftBtnActionFull" v-show="isFullscreen === true" @click="leftBtnActionFullFn" :style="fullBtnStyle">
      <img src="../assets/img/mx_video_back.png" alt="" />
      <span>{{ videoTitle }}</span>
    </div>
    <!-- 全屏 -->
    <div class="getRotateFullscreenMask" v-show="getFullscreenMask" :style="fullBtnStyleMask"></div>
    <!-- </div> -->

    <!-- 防刷课弹框 -->
    <van-popup v-model="FullscreenShow" style="width: 3.24rem; text-align: center; background-color: transparent" :style="isFullscreen === false
      ? ''
      : 'top: 36%;left: 8%; transform: rotate(90deg);'
    " :close-on-click-overlay="false">
      <div class="exitFullscreen-title">防刷课验证</div>
      <div class="exitFullscreen-calculation">
        <span>{{ fullscreenOne }}</span>+ <span>{{ fullscreenTwo }}</span>=
        <div>
          <div style="
                display: flex;
                height: 0.34rem;
                width: 0.52rem;
                align-items: center;
                justify-content: center;
                background: #fafcff;
                border-radius: 4px;
              " :style="borderStyle === false
                  ? 'border: 1px solid #E5EAF0;'
                  : 'border: 1px solid #F03426;'
                ">
            {{ trueNum }}
          </div>
          <div v-if="borderStyle === true" style="font-size: 0.12rem; color: #f03426">
            输入错误
          </div>
        </div>
      </div>
      <div class="exitFullscreen-submit">
        <ul class="numberAnswer">
          <li :style="numberItem === item ? 'color:#2C64F2' : 'color:#282A32'" class="number"
              v-for="(item, index) in numList" :key="index" @click="exitFullscreenSubmit(item)">
            {{ item }}
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

1、腾讯云播放器没有提供Controls的显示/隐藏监听，需要自己添加监听事件

// 监听控制栏状态

findClassChange () {

this.domClassObserver = new MutationObserver((mutations) => {



if (mutations.length > 0) {

const mutation = mutations.slice(-1)[0]

console.log('mutation.type222', mutation)

if (mutation.type === 'attributes' && mutation.attributeName === 'class') {

console.log('this.isPlay', this.isPlay)



if (this.isPlay === false) {

return

}

if (this.rateMenuShow) {

this.rateMenuShow = false

this.rateMenuShowAction(this.rateMenuShow)

}

if (mutation.target.classList.contains('vjs-user-inactive') && this.isPlay === true) {

this.showLeftFullBtn(false)

} else {

this.showLeftFullBtn(true)

}

console.log('mutation.type', mutation)


}

}


})

let videoDom = document.querySelector('.video-js')

console.log('videoDom', videoDom)


this.domClassObserver.observe(videoDom, { attributes: true, attributeOldValue: true, attributeFilter: ['class']})

},

2、根据控制栏动态显示倍速提示框

    // 倍速方法
    rateMenuShowAction (show) {
      let controlDom = document.querySelector('.vjs-playback-rate')
      let menu = controlDom.querySelector('.vjs-menu')
      console.log('rateMenuShowAction', show)
      if (!show) {
        menu.classList.remove('vjs-lock-showing')
      } else {
        menu.classList.add('vjs-lock-showing')
      }
    },

3、根据控制栏联动播放器顶部标题和返回按钮

showLeftFullBtn (show) {
      this.leftShow = show
      this.FullscreenMask = show
      this.getFullscreenMask = show
      if (!show && this.rateMenuShow) {
        this.rateMenuShow = false
        this.rateMenuShowAction(this.rateMenuShow)
      }
    },

需要注意的是，腾讯云播放器使用了video标签，在全屏状态下,会新建图层位于最高级别，需要获取图层标签，动态添加按钮和标题

    // 添加横屏顶部按钮
    addFullBtn () {
      this.$nextTick(() => {
        let videoDom = document.querySelector('.video-js')
        let leftBtnFull = document.querySelector('.leftBtnActionFull')
        let leftBtnFullMask = document.querySelector('.getRotateFullscreenMask')
        if (videoDom && leftBtnFull) {
          videoDom.appendChild(leftBtnFull)
          videoDom.appendChild(leftBtnFullMask)
        }
      })
    },
    // 移除顶部按钮
    removeFullBtn () {
      this.$nextTick(() => {
        let videoDom = document.querySelector('.video-js')
        let leftBtnFull = document.querySelector('.leftBtnActionFull')
        let leftBtnFullMask = document.querySelector('.getRotateFullscreenMask')
        if (videoDom && leftBtnFull) {
          videoDom.removeChild(leftBtnFull)
          videoDom.removeChild(leftBtnFullMask)
        }
      })
    },

播放器禁止拖动实现

// 是否允许拖动
    canDragProgressBar () {
      this.$nextTick(() => {
        let progressCom = document.querySelector('.vjs-progress-control')
        if (this.dragProgressBar) {
          if (progressCom) {
            progressCom.style.pointerEvents = 'none'
          }
        } else {
          if (progressCom) {
            progressCom.style.pointerEvents = 'auto'
          }
        }
      })

    },