video标签使用 踩坑记录

< video >原生标签使用记录

1、监听视频播放30s

需求描述：视频浏览30s，才能进行下一步操作
监听事件：@timeupdate
timeupdate：currentTime属性指示的时间已更新

const video = document.querySelector('video');
video.addEventListener('timeupdate', (event) => {
//当前播放进度
  console.log('The currentTime attribute has been updated. Again.');
});

实现方案：
监听timeupdate事件，判断播放状态，如果是播放中，则在timeArr数组中记录下当前秒数（timeupdate事件一秒内可触发4-99次，所以需要判断timeArr中有无当前秒数）

timeupdate(){
        if(this.timeArr.length > 30){
            return
        }
        if(this.timeArr.length == 30){
            console.log('已观看30s')
            this.timeArr.push(999) //给数组塞个数据 防止一直调用此处
            return
        }
        let currentTime = parseInt(this.$refs.video.currentTime,10)
        if(this.playStatus){
            if(this.timeArr.length ==0 || ( 0 < this.timeArr.length && !this.timeArr.includes(currentTime))){
                this.timeArr.push(currentTime)
            }
    },

2、video层级太高

问题：部分设备（oppo手机） 视频总是会在最上层 ，会遮挡弹层
标签属性设置：x5-video-player-type=“h5” x5-video-player-fullscreen=“true”

3、ios播放自动全屏问题

问题：在ios设备中，点击视频播放 视频会自动全屏播放
标签属性设置：webkit-playsinline=“true” playsinline=“true”

4、ios画中画功能禁用

标签属性设置：controlslist=“nodownload” disablePictureInPicture

最终代码

<video src='https://xxx/wxc/activity/luckyBag/video/202112101407_2.mp4' 
       class="video" ref="videoPageTwo"  controls="controls"  @playing="playVideoPage2"  @timeupdate="timeupdatePage2" @pause="pausePage2" 
       webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
       poster="https://xxx/wxc/activity/luckyBag/video/video_poster.jpg"
       controlslist="nodownload" disablePictureInPicture
></video>

扩展 - shadow DOM

video标签控制器 shadow DOM ，
video::-webkit-media-controls （伪元素）给此样式设置 display：none; 可隐藏标签的控制器