HTML5全屏操作API
一、定义：HTML5规范允许自定义网页上的任一元素全屏显示，存在兼容问题
二、使用：
①基本：
- Node.RequestFullScreen（）开启全屏显示
- Node.CancelFullScreen（）关闭全屏显示
②由于兼容性的原因（在IE9以下不支持，但是在高级浏览器新版本支持），不同浏览器需要添加不同的私有前缀（在js中也有私有前缀，在方法属性之前加上即可，并且首字母需大写）
- webkit内核浏览器，如Chrome浏览器：以
webkitRequestFullScreen方法实现，谷歌浏览器前缀webkitRequestFullScreen()里最后的Screen的S也可以为小写s，建议写成驼峰命名法
- gecko内核浏览器，如火狐浏览器：以
mozRequestFullScreen方法实现。
- Trident内核浏览器，如IE浏览器：使用IE时，最后的screen的s为小写，也即ms
RequestFullscreen，否则无效
<script>
// 将浏览器前缀兼容封装成函数
function toFullVideo() {
if (videoDom.requestFullscreen) {
return videoDom.requestFullScreen();
} else if (videoDom.webkitRequestFullScreen) {
return videoDom.webkitRequestFullScreen();
} else if (videoDom.mozRequestFullScreen) {
return videoDom.mozRequestFullScreen();
} else {
return videoDom.msRequestFullscreen();
}
}
</script>
③页面全屏（页面文档全屏）
document.documentElement.webkitRequestFullScreen()
④取消页面全屏（跟元素没有关系）
document.webkitCancelFullScreen;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5全屏操作</title>
<style>
.box {
width: 400px;
height: 400px;
background: pink;
}
</style>
</head> <body>
<div class="box"></div>
<button class="btn1">全屏显示</button>
<button class="btn2">取消全屏</button>
<script>
document.querySelector(".btn1").onclick = function () {
document.documentElement.webkitRequestFullScreen();
};
document.querySelector(".btn2").onclick = function () {
document.webkitCancelFullScreen();
};
</script>
</body>
</html>
HTML5全屏操作API的更多相关文章
- HTML5全屏(Fullscreen)API详细介绍
// 整个页面 onclick= launchFullScreen(document.documentElement); // 某个元素 launchFullScreen(document.get ...
- How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口） 【精】
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...
- How to Use HTML5 FUll Screen API（怎样使用HTML5全屏接口）
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 假设你不太喜欢变化太快的东西,那么web开发可能不适合你. 我曾在2012年末有写过F ...
- HTML5 全屏特性
全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API ...
- HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() ...
- HTML5全屏背景视频与 CSS 和 JS（插件或库）
译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...
- 基于HTML5全屏图文左右滑动切换特效
基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <main> & ...
- HTML5--浏览器全屏操作、退出全屏、是否全屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5 全屏化操作功能
由于项目中用到了全屏化挫折功能,查看了API后写了一个简单的全屏化model <!DOCTYPE html> <html> <head> <meta http ...
随机推荐
- 【LEETCODE】41、905. Sort Array By Parity
package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...
- JDK并发的类
Future : 提前完成任务 原理:wait(),notify()的使用. 线程之间的通信 : CountDownLatch :线程计数 CyclicBarrier :循环计数 Semaphore ...
- subprocess.popen.kill杀死所有子进程
一.使用subprocess模块 使用subprocess模块可创建子进程. subprocess. Popen ( args , bufsize=0 , executable=None , stdi ...
- helm chart应用使用示例
有两种方法 一是按照正常流程直接用yaml文件的形式发布应用到k8s集群上 二是把生成好的yaml文件发布到kubeapps应用商店,在应用商店中操作发布应用到k8s集群中 这里采用第二种方式的变种方 ...
- CCF 2016-12-1 中间数
CCF 2016-12-1 中间数 题目 问题描述 在一个整数序列a1, a2, -, an中,如果存在某个数,大于它的整数数量等于小于它的整数数量,则称其为中间数.在一个序列中,可能存在多个下标不相 ...
- Wireless support
Wireless support 参考: https://www.rhyous.com/2010/12/03/freebsd-wireless-configuring-a-wireless-inter ...
- 【洛谷 P2483】 【模板】k短路（[SDOI2010]魔法猪学院）（A*）
题目链接 优先队列bfs第一次出队就是最短路,那么显然第k次出队就是k短路 ?????????????????????????????? 书上写的 但是直接优先队列bfs会T,所以用A*优化就行,估价 ...
- canvas上画出坐标集合，并标记新坐标，背景支持放大缩小拖动功能
写在前面:项目需求,用户上传一个区位的平面图片,用户可以在图片上添加新的相机位置,并且展示之前已绑定的相机坐标位置,图片支持放大缩小&拖动的功能.新增坐标,页面展示相对canvas定位,保存时 ...
- centos下安装nginx（转载）
http://blog.csdn.net/u010246789/article/details/51501710 有声明,不能转载,所以,就把地址弄了过来
- kubeadm添加新master或node
一.首先在master上生成新的token kubeadm token create --print-join-command [root@cn-hongkong nfs]# kubeadm toke ...