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 相关文章推荐
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
HTML基本元素标签介绍
Feb 28 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
小偷PHP+Html+缓存
2006/12/20 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
PHP内核探索之变量
2015/12/22 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
json简单介绍
2008/06/10 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
python实现QQ批量登录功能
2019/06/19 Python
使用Tkinter制作信息提示框
2020/02/18 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
工作态度不好检讨书
2015/05/06 职场文书
2016年安全月活动总结
2016/04/06 职场文书