HTML5 video进入全屏和退出全屏的实现方法


Posted in HTML / CSS onJuly 28, 2020

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

HTML / CSS 相关文章推荐
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 #HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 #HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 #HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 #HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 #HTML / CSS
HTML5 背景的显示区域实现
Jul 09 #HTML / CSS
HTML5图片层叠的实现示例
Jul 07 #HTML / CSS
You might like
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
PHP flock 文件锁详细介绍
2012/12/29 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
详解json在php中的应用
2018/09/30 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
python中requests模块的使用方法
2015/04/08 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
体育教育专业毕业生自荐信
2013/11/15 职场文书
森林病虫害防治方案
2014/06/02 职场文书
小组口号大全
2014/06/09 职场文书
测绘工程专业求职信
2014/07/15 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
读书笔记格式
2015/07/02 职场文书
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers