【前端】【H5 API】实现全屏显示功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>萌狼蓝天 伴姬一生</title>
</head>
<body>
<div>
<img src="./source/img/dog.jpg" height="300" alt="">
<button id="full">全屏显示</button>
<button id="cancelFull">取消全屏</button>
<button id="isFull">是否全屏</button>
<p id="tip" style="color:blue"></p>
</div>
<script>
//全屏显示
var div = document.querySelector('div');
document.querySelector('#full').onclick = function () {
if (div.requestFullscreen) {
div.requestFullscreen(); // 正常浏览器
} else if (div.webkitRequestFullScreen) {
div.webkitRequestFullScreen(); // webkit
} else if (div.mozRequestFullScreen) {
div.mozRequestFullScreen(); //早期火狐浏览器
} else if (div.oRequestFullScreen) {
div.oRequestFullScreen(); //早期Opera浏览器
} else if (div.msRequestFullscreen) {
div.msRequestFullscreen(); //早期IE浏览器
} else {
alert('暂不支持在您的浏览器中全屏');
}
};
//取消全屏显示
document.querySelector('#cancelFull').onclick = function () {
if (document.exitFullscreen) {
document.exitFullscreen(); // 正常浏览器
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen(); // webkit
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen(); //早期火狐浏览器
} else if (document.oCancelFullScreen) {
document.oCancelFullScreen(); //早期Opera浏览器
} else if (document.msCancelFullscreen) {
document.msCancelFullscreen(); //早期IE浏览器
} else {
alert('暂不支持在您的浏览器中全屏');
}
//可以用document，也可以用上方设置的变量 div
};
//检测当前是否处于全屏状态
document.querySelector('#isFull').onclick = function () {
// alert(document.webkitIsFullScreen); // webkit
// 使用上面的弹窗方式。如果是处于全屏状态，会自动退出
document.getElementById('tip').innerHTML=document.webkitIsFullScreen;
};
</script>
</body>
</html>
各类浏览器全屏的方法
一般浏览器
使用requestFullscreen()和exitFullscreen()来实现
早期版本Chrome浏览器
基于WebKit内核的浏览器需要添加webkit前缀，使用webkitRequestFullScreen()和webkitCancelFullScreen()来实现。
早期版本IE浏览器
基于Trident内核的浏览器需要添加ms前缀，使用msRequestFullscreen()和msExitFullscreen()来实现，注意方法里的screen的s为小写形式。
早期版本火狐浏览器
基于Gecko内核的浏览器需要添加moz前缀，使用mozRequestFullScreen()和mozCancelFullScreen()来实现。
早期版本Opera浏览器
Opera浏览器需要添加o前缀，使用oRequestFullScreen()和oCancelFullScreen()来实现。
【前端】【H5 API】实现全屏显示功能的更多相关文章
- h5 app 设置全屏
h5 app的全屏和沉浸式状态栏是不一样的 全屏模式 常见使用场景:如果页面是全屏游戏,一般会直接让状态栏消失,也就是页面全屏.webview高度全屏了,状态栏没有了.写法: 终端支持:没有终端类型限 ...
- h5的api dom全屏展示
下面是完整的例子,暂不做分析 <!DOCTYPE html> <html> <head> <title> FullScreen API 演示</t ...
- H5微信播放全屏问题
在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微信框,出现控制条,如果视频不是腾讯视频,播放完毕会出现腾讯视频的广告推送等问题 解决办法:给vi ...
- iOS APP 中H5视频默认全屏播放问题解决
问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...
- layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满<video>的方法
1. 在layer弹窗组件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 举个栗子 <!DOCTYPE html> <html> < ...
- Fullscreen API：全屏操作
function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } ...
- H5视频播放自动全屏，暂停退出全屏等功能
html5视频播放自动全屏,暂停退出全屏等功能 在参考了html5 video fullScreen全屏实现方式及司徒正美的书<javascript框架设计>287页相关代码后,在Safa ...
- 全屏显示网页FULLSCREEN API
第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...
- H5中用js让页面全屏
概述 意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...
- 第89天：HTML5中 访问历史、全屏和网页存储API
一.访问历史 API 通过history对象实现前进.后退和刷新之类的操作 history新增的两个方法history.replaceState()和history.pushState()方法属于HT ...
随机推荐
- 使用 vuex 和 本地存储实现永久性token存在 并且在请求拦截统一添加headers token 避免重复代码
在 vuex 仓库中设置state的token值:从本地中取值: 登录的时候调用唯一可以修改state数据的mutations方法设置token : export default new Vuex.S ...
- package.json文件干什么的 ？
package.json 是项目描述文件,记录了当前项目的信息,比如项目的名字,版本,作者,还有所依赖的第三方模块 : dependencies 是项目依赖,是项目上线时要依赖的第三方包 : devd ...
- 分享几个实用且高效的EF Core扩展类库，提高开发效率！
前言 今天大姚给大家分享3款开源且实用的EF Core扩展类库,希望能帮助你在使用 EF Core 进行数据库开发变得更加高效和灵活,提高开发效率. EF Core介绍 Entity Framewor ...
- 一次彻底讲清如何处理mysql 的死锁问题
MySQL 死锁 是指两个或多个事务互相等待对方持有的锁,从而导致所有事务都无法继续执行的现象.在 InnoDB 存储引擎中,死锁是通过锁机制产生的,特别是在并发较高.业务逻辑复杂的情况下,更容易发生 ...
- appium环境搭建及命令行启动sdk模拟器-附踩坑以及解决过程
安装教程这里就不阐述了,网上一大堆教程,下载完成后安装然后配置对应的环境变量即可 android sdk及java home配置: path配置: %ANDROID_HOME%\platform-to ...
- 项目运行时，tomcat服务器端口被占用
1.查看tomcat配置文件: 2.查看项目控制台的打印信息: 3.dos命令行解决端口占用 (1)dos命令模式下输入: netstat -ano (进入dos命令:Win + R ,输入cmd ) ...
- python+ffmpeg视频转码转格式
本文转发来自:https://blog.csdn.net/KH_FC/article/details/115771126 废话 python目前自己也是在学习当中,对python也不是特别精通,写视频 ...
- 10个一行Python代码：利用sort()函数进行高效排序
今天我们要玩点有趣的--用一行代码来展示sort()函数的超级能力!通常,排序算法可能让你觉得是编程中的"重量级选手",但有了Python的sort(),一切都变得轻而易举,甚至可 ...
- Java基础完结
花费了大概一周的时间,看完了韩顺平的Java基础课,不得不说韩老师讲的java基础还是相当仔细的,细节满满,我认为这既是优点也是缺点吧23333333-- 接下来准备看老杜的MySQL,因为没有配套的 ...
- 3.9 Linux查看目录中的文件（ls命令）
通过学习cd 和 pwd 命令,相信读者已经能够在庞大的 Linux 文件系统中,随心所欲地游荡并确定自己所在的位置了.本节继续来学习,如何知道某目录中存放了哪些文件或子目录. ls 命令,list ...