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 选择器 基本选择器介绍
Jan 21 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
CSS 实现角标效果的完整代码
Jun 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分页列表的代码
2007/03/18 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
浅析javascript中的Event事件
2016/12/09 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
python比较两个列表是否相等的方法
2015/07/28 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
python列表推导式入门学习解析
2019/12/02 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
停水通知
2015/04/16 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python