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

2023-06-15 16:47| 来源: 网络整理| 查看: 265

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

整体大致页面

{{ videoTitle }} 防刷课验证 {{ fullscreenOne }}+ {{ fullscreenTwo }}= {{ trueNum }} 输入错误 {{ item }}

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' } } }) },

【本文地址】

公司简介

联系我们