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动画效果抖动解决方法
Sep 03 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
javascript实现日历效果
2019/06/17 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
python绘制双柱形图代码实例
2017/12/14 Python
详解python3中zipfile模块用法
2018/06/18 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
python3获取当前目录的实现方法
2019/07/29 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
医院门卫岗位职责
2013/12/30 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
格林童话读书笔记
2015/06/30 职场文书
旅行社计调工作总结
2015/08/12 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python