// 找到支持的方法, 使用需要全屏的 element 调用 function launchfullscreen(element) { if(element.requestfullscreen) { element.requestfullscreen(); } else if(element.mozrequestfullscreen) { element.mozrequestfullscreen(); } else if(element.webkitrequestfullscreen) { element.webkitrequestfullscreen(); } else if(element.msrequestfullscreen) { element.msrequestfullscreen(); } } // 在支持全屏的浏览器中启动全屏 // 整个页面 launchfullscreen(document.documentelement); // 某个元素 launchfullscreen(document.getelementbyid("videoelement"));将需要全屏显示的dom元素作为参数,调用此方法即可让window进入全屏状态,有时候可能需要用户同意(浏览器自己和用户交互),假若用户拒绝,则可能出现各种不完全的全屏.
// 退出 fullscreen function exitfullscreen() { if(document.exitfullscreen) { document.exitfullscreen(); } else if(document.mozexitfullscreen) { document.mozexitfullscreen(); } else if(document.webkitexitfullscreen) { document.webkitexitfullscreen(); } } // 调用退出全屏方法! exitfullscreen();请注意: exitfullscreen 只能通过 document 对象调用 —— 而不是使用普通的 dom element.
var fullscreenelement = document.fullscreenenabled || document.mozfullscreenelement || document.webkitfullscreenelement; var fullscreenenabled = document.fullscreenenabled || document.mozfullscreenenabled || document.webkitfullscreenenabled;在初始化全屏方法时,可以探测需要监听哪一个事件.
/* html */ :-webkit-full-screen { /* properties */ } :-moz-fullscreen { /* properties */ } :fullscreen { /* properties */ } /* deeper elements */ :-webkit-full-screen video { width: 100%; height: 100%; } /* styling the backdrop */ ::backdrop { /* properties */ }在某些情况下,webkit需要一些特殊处理,所以在处理多媒体时,你可能需要上面的代码。
请记住这个很好的api吧 —— 在未来的某个时刻,它肯定会派上用场!
如对本文有疑问, 点击进行留言回复!!
HTML5跳转小程序wx-open-launch-weapp的示例代码
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
网友评论