设计网站需要什么条件,深圳公司招聘,wordpress 提示插件安装,工业企业网站建设费这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下首先来说#xff0c;这个标题具有误导性#xff0c;但这样设置改标题也是主要因为video使用的比较多在html5中#xff0c;全屏方法可以适用于很多html 元素…这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下首先来说这个标题具有误导性但这样设置改标题也是主要因为video使用的比较多在html5中全屏方法可以适用于很多html 元素不仅仅是video全屏问题*{padding: 0px;margin: 0px;}body p.videobox{width: 400px;height: 320px;margin: 100px auto;background-color:#000;}body p.videobox video.video{width: 100%;height: 100%;}:-webkit-full-screen {}:-moz-full-screen {}:-ms-fullscreen {}:-o-fullscreen {}:full-screen {}:fullscreen {}:-webkit-full-screen video {width: 100%;height: 100%;}:-moz-full-screen video{width: 100%;height: 100%;}全屏//反射調用var invokeFieldOrMethod function(element, method){var usablePrefixMethod;[webkit, moz, ms, o, ].forEach(function(prefix) {if (usablePrefixMethod) return;if (prefix ) {// 无前缀方法首字母小写method method.slice(0,1).toLowerCase() method.slice(1);}var typePrefixMethod typeof element[prefix method];if (typePrefixMethod ! undefined) {if (typePrefixMethod function) {usablePrefixMethod element[prefix method]();} else {usablePrefixMethod element[prefix method];}}});return usablePrefixMethod;};//進入全屏function launchFullscreen(element){//此方法不可以在異步任務中執行否則火狐無法全屏if(element.requestFullscreen) {element.requestFullscreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if(element.msRequestFullscreen){element.msRequestFullscreen();} else if(element.oRequestFullscreen){element.oRequestFullscreen();}else if(element.webkitRequestFullscreen){element.webkitRequestFullScreen();}else{var docHtml document.documentElement;var docBody document.body;var videobox document.getElementById(videobox);var cssText width:100%;height:100%;overflow:hidden;;docHtml.style.cssText cssText;docBody.style.cssText cssText;videobox.style.cssText cssText ; margin:0px;padding:0px;;document.IsFullScreen true;}}//退出全屏function exitFullscreen(){if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if(document.oRequestFullscreen){document.oCancelFullScreen();}else if (document.webkitExitFullscreen){document.webkitExitFullscreen();}else{var docHtml document.documentElement;var docBody document.body;var videobox document.getElementById(videobox);docHtml.style.cssText ;docBody.style.cssText ;videobox.style.cssText ;document.IsFullScreen false;}}document.getElementById(fullScreenBtn).addEventListener(click,function(){launchFullscreen(document.getElementById(video));window.setTimeout(function exit(){//檢查瀏覽器是否處於全屏if(invokeFieldOrMethod(document,FullScreen) || invokeFieldOrMethod(document,IsFullScreen) || document.IsFullScreen){exitFullscreen();}},5*1000);},false);以上就是本文的全部内容希望对大家的学习有所帮助更多相关内容请关注jquery中文网相关推荐HTML5video标签的播放控制关于H5新属性audio音频和video视频的控制解析
