当我们使用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进入全屏和退出全屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
摩尔定律不再适用 从2004年伟创力(Flextronics)收购 Frog 设计公司开始,过去 10...
在做页面的时候,经常要根据不同的操作来显示或隐藏一个表格中的部分内容,隐藏...
只要触发IE的hasLayout,非浮动元素就会拥有布局。所以,利用IE6特有的hack规则...
功能需求 项目需求:需要实现一个可以自由书写的小画板 简单实现 对于熟悉canvas...
先来看效果: 这效果看起来挺炫,但原理并不复杂,能实现一片花瓣动起来,就能实...
复制代码 代码如下: span style="font-family: Arial, Helvetica, sans-serif;"s...
有些Java面试题答案是我自己总结的,也有些Java面试题及答案是在网上搜集整理的...
HTML5规范开发完成时,将成为未来的主流,据统计2013年全球将有10亿手机浏览器支...
XHTML是W3C推荐的一种标准,它定义了一种与XML兼容的HTML版本。XHTML文档是一个...
AmazeUI个人感觉确实蛮不错的,虽然现在还不算特别完善,但毕竟是国内首款,用起...