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 26 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 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
关于crontab的使用详解
2013/06/24 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
python如何实现内容写在图片上
2018/03/23 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
征婚广告词
2014/03/17 职场文书
政治思想表现评语
2014/05/04 职场文书
土建工程师岗位职责
2014/06/10 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
小学班主任心得体会
2016/01/07 职场文书
技术入股协议书
2016/03/22 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
千万级用户系统SQL调优实战分享
2022/03/03 MySQL