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 相关文章推荐
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
html5实现滑块功能之type="range"属性
Feb 18 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
javascript web对话框与弹出窗口
2009/02/22 Javascript
javascript中"/"运算符常见错误
2010/10/13 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
python实现rsa加密实例详解
2017/07/19 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
python定义具名元组实例操作
2021/02/28 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
旅游管理专业生自荐信范文
2014/01/02 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2014年度工作总结报告
2014/12/15 职场文书
期末考试复习计划
2015/01/19 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书