您现在的位置是：网站首页> 编程资料编程资料

HTML5 video进入全屏和退出全屏的实现方法html5 移动端视频video的android兼容(去除播放控件、全屏)HTML5 video播放器全屏(fullScreen)方法实例

2021-08-30 1428人已围观

简介 这篇文章主要介绍了HTML5 video进入全屏和退出全屏的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

当我们使用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进入全屏和退出全屏内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：canvas实现图片镜像翻转的2种方式在canvas上实现元素图片镜像翻转动画效果的方法

下一篇：Canvas 帧动画吃苹果小游戏canvas简单连线动画的实现代码5分钟实现Canvas鼠标跟随动画背景canvas实现有递增动画的环形进度条的实现方法前端canvas动画如何转成mp4视频的方法Canvas实现贝赛尔曲线轨迹动画的示例代码用canvas做一个DVD待机动画的实现代码canvas实现扭蛋机动画效果的示例代码canvas实现漂亮的下雨效果的示例Canvas制作的下雨动画的示例canvas实现圆形进度条动画的示例代码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网