网站首页 > web开发 > HTML5 正文
当我们使用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饼图绘制实现统计图的方法
- 下一篇: canvas实现图片镜像翻转的2种方式
猜你喜欢
- 2021-07-16 HTML页面原生VIDEO标签隐藏下载按钮功能
- 2021-07-16 html5实现九宫格抽奖可固定抽中某项奖品
- 2021-07-16 HTML5实现应用程序缓存(Application Cache)
- 2021-07-16 HTML5播放实现rtmp流直播
- 2021-07-16 HTML5中在title标题标签里设置小图标的方法
- 2021-07-16 HTML5图片层叠的实现示例
- 2021-07-16 HTML5 背景的显示区域实现
- 2021-07-16 HTML5获取当前地理位置并在百度地图上展示的实例
- 2021-07-16 uniapp+Html5端实现PC端适配
- 2021-07-16 HTML5跳转小程序wx-open-launch-weapp的示例代码
你 发表评论:
欢迎- 2952℃JS彻底弄懂GMT和UTC时区
- 2824℃JS使用canvas技术模仿echarts柱状图
- 2649℃JS装饰者模式和TypeScript装饰器
- 2574℃JS ES6展开运算符的几个妙用
- 2543℃vue的ssr服务端渲染示例详解
- 2365℃jquery插件实现图片对比
- 2320℃微信小程序视频弹幕位置随机
- 1817℃docker安装redis设置密码并连接的操作
- 0℃未命名
- 开源分类
- 最近发表
-
- (1)python+selenium第一个自动化脚本:实现打开百度首页并搜索selenium
- Discuz!教程之启用HTTPS后解决各处遗留http://网址问题
- 网站如何识别 你是 selenium爬虫?那我们怎么解决(反反爬)
- 旋转拖动验证码解决方案
- python关键词排名_python实现百度关键词排名查询
- Unity3D研究院之通过ipa或apk获取游戏所使用的unity和Xcode版本
- Unity3D研究院编辑器之脚本生成Preset Libraries(十四)
- 手把手教你Charles抓包工具使用
- python开发的程序内存越来越大_遇到个python进程占用内存太多的问题 | 数据,更懂人心...
- Selenium Python3 请求头配置
- 开源网标签
本文暂时没有评论,来添加一个吧(●'◡'●)