html5怎么滚动屏幕(HTML5 video进入全屏和退出全屏的实现方法)
类别:Web前端 浏览量:1720
时间:2021-10-15 00:22:46 html5怎么滚动屏幕
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进入全屏和退出全屏内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5隐藏数字(HTML5去掉输入框type为number时的上下箭头的实现方法)
- 制作共用的头部和底部html5界面(html5移动端价格输入键盘的实现)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- html5 video 事件(HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题)
- html5文档的基本结构及必要的注释(关于HTML5+ API plusready的兼容问题)
- html5视频播放代码详解(HTML5基于flash实现播放RTMP协议视频的示例代码)
- vscode快速生成html框架(VSCode 自定义html5模板的实现)
- html5怎么修改背景颜色(HTML5 body设置全屏背景图片的示例代码)
- html5做app流程(Html5嵌入钉钉的实现示例)
- html5定位教学(Html5 webview元素定位工具的实现)
- html5视频播放(使用HTML5加载音频和视频的实现代码)
- html5中datalist标签
- html5基本结构图解(html5简介及新增功能介绍)
- html5所有特性(HTML5 FileReader对象的具体使用方法)
- html5最好用语义元素(HTML5语义化元素你真的用对了吗)
- html5如何控制内容(html5拖拽应用记录及注意点)
- 赏读 八月再见,九月你好(赏读八月再见九月你好)
- 散文 八月再见,九月,我在风中等你(散文八月再见九月)
- 8月再见 9月你好(8月再见)
- 魔兽世界 设计师爆料,原始版本并无PVP,跨阵营属于返璞归真(魔兽世界设计师爆料)
- 吐槽完《弧光大作战》之后,我们和设计师聊了聊魔兽首款手游的立项初衷和未来(吐槽完弧光大作战之后)
- 魔兽争霸3自定义战役少年杰雷 2(魔兽争霸3自定义战役少年杰雷)
热门推荐
- centos怎样开启tomcat(Centos8.2云服务器环境安装Tomcat8.5的详细教程)
- canvas进阶教程(原生canvas制作画图小工具的踩坑和爬坑)
- 云主机越来越受欢迎吗(云主机的发展前景怎样?会成为主流吗?)
- iframe 弹窗(遮罩层 + Iframe实现界面自动显示的示例代码)
- python读取文件怎么用(Python基础之文件读取的讲解)
- dockernacos教程(Docker+nacos+seata1.3.0安装与使用配置教程)
- vue验证码怎么用(vue验证码组件使用方法详解)
- extjs column列布局
- isapi和cgi限制
- mysql 索引使用总结(MySQL复合索引的深入探究)