html5怎么滚动屏幕(HTML5 video进入全屏和退出全屏的实现方法)
类别:Web前端 浏览量:1720
时间:2021-10-15 00:22:46 html5怎么滚动屏幕
HTML5 video进入全屏和退出全屏的实现方法当我们使用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进入全屏和退出全屏内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- 用html5做一个音乐的播放器(HTML5自定义mp3播放器源码)
- html5显示中心代码(HTML5中的Web Notification桌面通知功能的实现方法)
- html5图片做背景代码(Html5之webcoekt播放JPEG图片流)
- html5菜单栏(html5写一个BUI折叠菜单插件的实现方法)
- html5 固定图片(HTML5拖放API实现自动生成相框功能)
- Html5中的<section>标签
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- html5的canvas图形绘制技术(详解HTML5 Canvas标签及基本使用)
- html5实时通讯(使用Html5 Stream开发实时监控系统)
- html5的表单怎么写(HTML5新增form控件和表单属性实例代码详解)
- h5制作支付功能(基于HTML5+tracking.js实现刷脸支付功能)
- html5中的语义化标签有哪些(详解HTML5常用的语义化标签)
- html5入门布局(吃透移动端 Html5 响应式布局)
- html5复选框属性教程(HTML5单选框、复选框、下拉菜单、文本域的实现代码)
- 制作共用的头部和底部html5界面(html5移动端价格输入键盘的实现)
- html5 页面向上滑动(html5手机键盘弹出收起的处理)
- 励志名人名言大全摘抄(世界名著30句励志名言)
- 劳累一天很疲惫的说说(身心疲惫好累的说说)
- 怅然若失是什么意思(沧州小记者成语接龙|怅然若失)
- 虐心总裁小说(那些虐到极致的总裁文)
- 不爱说话怎么办(老实人性格内向不爱说话)
- 一生所爱歌词真正含义(大话西游之一生所爱听后感)
热门推荐
- linux启动jenkins(linux 下jenkins项目搭建过程centos7为例 )
- docker容器启动自动执行命令(docker run 运行容器自动结束的解决)
- python3常见问题(对Python3使运行暂停的方法详解)
- JS实现文字向下滚动
- nginx指令大全(Nginx常用技巧使用实例汇总)
- sqlserverdatetime时区(解析SQL Server中datetimeset转换datetime类型问题)
- docker 查看容器状态命令(Docker 使用 Supervisor 来管理进程操作)
- phpstudy服务器怎么设置(PHPStudy打开网页很慢的原因及解决方案)
- python字典的值排序(python 对字典按照value进行排序的方法)
- mysql默认的事务隔离级别是哪一种(MySql学习笔记之事务隔离级别详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9