当我们使用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进入和退出全屏功能的代码怎么写”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注恒创科技网站,小编每天都会为大家更新不同的知识。