H5 video 进入全屏和退出全屏

效果示例

见上图中，video禁用了原生控制条，加载自定义控制条，左侧为关闭，右侧为录像、全屏

以下主要针对全屏功能如何实现。

现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样：

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();// W3C 提议
element.requestFullscreen();
document.exitFullscreen();

一般兼容性写法，我们先使用w3c标准的方法，如果不可以在兼容不同浏览器。

//进入全屏
function FullScreen() {var doc = document.documentElement;if (doc.requestFullscreen) {ele.requestFullscreen();} else if (doc.mozRequestFullScreen) {doc.mozRequestFullScreen();} else if (ele .webkitRequestFullScreen) {doc.webkitRequestFullScreen();}
}//退出全屏
function exitFullscreen() {var doc = document;if (doc.exitFullscreen) {doc.exitFullscreen();} else if (de.mozCancelFullScreen) {doc.mozCancelFullScreen();} else if (de.webkitCancelFullScreen) {doc.webkitCancelFullScreen();}
}

具体示例代码

本示例基于Vue
Html部分

<div class="controls" v-if="isControl"><a class="a-btn a-btn-exitfullscreen" v-if="isFull" @click="exitFullScreen"><i class="icon material-icons" v-html="''" title="退出全屏">i>a><a class="a-btn a-btn-fullscreen" v-else @click="fullScreen"><i class="icon material-icons" v-html="''" title="全屏">i>a>
div>

Js部分

...  // 省略无关代码
data: {status: 0, // 记录全屏状态isFull: false, // 是否全屏
},
methods: {// 进入全屏fullScreen(){var doc = document.documentElement;if (doc.requestFullscreen) {doc.requestFullscreen();} else if (doc.mozRequestFullScreen) {doc.mozRequestFullScreen();} else if (doc.webkitRequestFullScreen) {doc.webkitRequestFullScreen();}this.isFull = true;this.status = 0;},// 退出全屏exitFullScreen(){var doc = document;if (doc.exitFullscreen) {doc.exitFullscreen();} else if (doc.mozCancelFullScreen) {doc.mozCancelFullScreen();} else if (doc.webkitCancelFullScreen) {doc.webkitCancelFullScreen();}this.isFull = false;this.status = 0;},
}
...

按照上面代码基本已经实现全屏和退出全屏了。 但是退出全屏不仅可以点击按钮，也可以按Esc 和 F11。 如果用户不是点击按钮退出全屏的话就不能监测到状态的改变，所以还得想办法监测状态改变。

检查全屏状态变化有2种方法

fullscreenchange

document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);

resize

document.addEventListener("resize", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

本示例使用的是后者，具体代码：

... // 省略无关代码
// 监听reseize
onResize(){var self = this;var throttle = function(func, delay) {            var timer = null;            return function() {                var context = this;               var args = arguments;                if (!timer) {                    timer = setTimeout(function() {                        func.apply(context, args);                        timer = null;                    }, delay);                }            }        }        function handle() {   if(self.status && self.isFull){self.exitFullScreen();self.status = 0;} else{self.status = 1;}    } window.addEventListener("resize", throttle(handle,500), false);},...

通过监测window的窗口大小改变，判断是否由按钮触发，不是按钮触发这为非正常退出全屏，对于全屏状态改变限制每秒只生效一次

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！