当我们使用video标签的时候,有时候因为更多的需要,我们要自己自定义控制栏,而进入和退出全屏也是其中的一部分
不同的浏览器有不同的实现方法
// Webkit element.webkitRequestFullScreen();//进入全屏 document.webkitCancelFullScreen();//退出全屏 // Firefox element.mozRequestFullScreen(); document.mozCancelFullScreen(); // W3C element.requestFullscreen(); document.exitFullscreen();
一般兼容性写法,我们先使用w3c标准的方法,如果不可以在兼容不同浏览器。
//进入全屏 function FullScreen() { var ele = document.documentElement; if (ele.requestFullscreen) { ele.requestFullscreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen(); } else if (ele.webkitRequestFullScreen) { ele.webkitRequestFullScreen(); } } //退出全屏 function exitFullscreen() { var de = document; if (de.exitFullscreen) { de.exitFullscreen(); } else if (de.mozCancelFullScreen) { de.mozCancelFullScreen(); } else if (de.webkitCancelFullScreen) { de.webkitCancelFullScreen(); } }
接下来是用例
$(ele).on('click',function(){ FullScreen(); // exitFullscreen(); });
到此这篇关于HTML5 video进入全屏和退出全屏的实现方法的文章就介绍到这了,更多相关HTML5 video进入全屏和退出全屏内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
网站类容多为转载,如有侵权,请联系站长删除
上一个:canvas实现图片镜像翻转的2种方式在canvas上实现元素图片镜像翻转动画效果的方法
下一个:Canvas 帧动画吃苹果小游戏canvas简单连线动画的实现代码5分钟实现Canvas鼠标跟随动画背景canvas实现有递增动画的环形进度条的实现方法前端canvas动画如何转成mp4视频的方法Canvas实现贝赛尔曲线轨迹动画的示例代码用canvas做一个DVD待机动画的实现代码canvas实现扭蛋机动画效果的示例代码canvas实现漂亮的下雨效果的示例Canvas制作的下雨动画的示例canvas实现圆形进度条动画的示例代码