vue实现自定义H5视频播放器的方法步骤(3)

// 设置全屏 fullScreen() { console.log('点击全屏...'); if (!this.state.fullScreen) { this.state.fullScreen = true; this.$video.webkitRequestFullScreen(); } else { this.state.fullScreen = false; document.webkitCancelFullScreen(); }

坑点汇总

1.视频预加载才能获取时长
需要设置预加载 preload="auto"
2.Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置
父元素设置display:none时获取不到尺寸数据民谣改为visibility:hidden
3.play()方法异常捕获
try{ xxxxx.play } catch(e) { yyyyyy }
4.安卓手机video兼容性处理, 视频播放时层级置顶,会影响全局弹出层样式
我这里做的处理是当弹出层出现时把视频给隐藏掉(宽高为0,或者直接去掉),用封面图来替代
5.ios下全屏处理
设置相应属性即可, playsinline

代码直通车: https://github.com/appleguardu/vue-h5-video