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 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
js创建对象的区别示例介绍
2014/07/24 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
python模块之subprocess模块级方法的使用
2019/03/26 Python
Numpy的简单用法小结
2019/08/28 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python实现小世界网络生成
2019/11/21 Python
解决Python3下map函数的显示问题
2019/12/04 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
新闻系毕业生推荐信
2013/11/16 职场文书
九年级物理教学反思
2014/01/29 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
思想工作总结范文
2015/08/12 职场文书
党校培训学习心得体会
2016/01/06 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python