项目场景: 最近在开发h5页面中的视频需求,因为原生的video在移动端是没有倍速键的,所以如果我要自定义控制按钮,就必须隐藏掉原生的控制器,于是我尝试用video的requestFullScreen()方法来使视频全屏,但是调用这个方法之后,隐藏的原生控制器又出来了,而自定义的控制按钮被覆盖了,于是我想到自己手动设置全屏,这是我目前想到的最笨的也是唯一一个方法,如果各位大佬有更好的做法,麻烦告诉下本菜鸟呜呜呜呜!!!!
setFullScreen() {
var conW = window.innerWidth || document.documentElement.clientWidth || document.body
.clientWidth;
var conH = window.innerHeight || document.documentElement.clientHeight || document.body
.clientHeight;
this.$refs.videoWrap.style.transform = "rotate(90deg) translate(" + ((conH - conW) / 2) + "px," +
((conH - conW) / 2) + "px)";
this.$refs.videoWrap.style.width = conH + "px";
this.$refs.videoWrap.style.height = conW + "px";
this.$refs.videoWrap.style.zIndex = "9999";
//禁止页面滑动,使全屏后页面上只显示视频
document.body.style.position = "fixed";
document.body.style.top = "0";
document.body.style.left = "0";
},