HTML5 video进入全屏和退出全屏的实现方法
程序员文章站
2022-06-22 18:33:17
HTML5 video进入全屏和退出全屏的实现方法这篇文章主要介绍了HTML5 video进入全屏和退出全屏的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习... 20-07-28...
当我们使用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进入全屏和退出全屏内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
推荐阅读
-
react-native-video实现视频全屏播放的方法
-
如何使用H5的video实现全屏时横屏播放,手势上下滑动调节音量,左右滑动快进和后退
-
html5 video全屏播放/自动播放的实现示例
-
HTML5 video进入全屏和退出全屏的实现方法
-
JavaScript全屏和退出全屏实现方法详解
-
js控制页面的全屏展示和退出全屏显示的方法_javascript技巧
-
JavaScript全屏和退出全屏实现方法详解
-
react-native-video实现视频全屏播放的方法
-
js控制页面的全屏展示和退出全屏显示的方法_javascript技巧
-
防止html5的video标签在iphone中自动全屏的方法