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 ...
随机推荐
- MVC-08模型
部分7:添加数据模型. MVC模型 MVC模型包含所有应用程序逻辑(业务逻辑.验证逻辑.数据访问逻辑),除了纯视图和控制器逻辑. 通过MVC,模型可保存并操作应用程序数据. Models文件夹 Mod ...
- SVN的branches、trunk、tags使用
本文针对实际开发过程中,svn使用到的trunk.branches.tags情况进行操作模拟, 一.创建trunk.branches.tags文件夹 我们在上文的svn仓库下创建trunk.branc ...
- 实现负载均衡的小demo
首先我们先来了解负载均衡: 负载均衡是为了缓解网络压力的,服务器端进行扩容的重要手段 实现有两种方式:硬件F5 . 软件nginx.Dubbo 为了实现负载均衡的原理,我们基于以下两篇随笔继 ...
- R_基本统计分析_06
summary()提供基础的统计信息 sapply(x,FUN,options)可以指定统计函数 fivenum()可以返回图基五数 Hmisc 中的describe(data)返回变量,观测的变量, ...
- UnicodeDecodeError: 'utf-8' codec can't decode byte..问题
解决UnicodeDecodeError: 'utf-8' codec can't decode byte..问题 问题描述: 问题分析: 该情况是由于出现了无法进行转换的 二进制数据 造成的,可以写 ...
- Bootstrap 结合 PHP ,做简单的登录以及注册界面及功能
登录实现 HTML代码 <div class="container"> <?php if (isset($error_msg)): ?> <div c ...
- 结合模板导出PDF文件
@Action("report_exportJasperPdf") public String exportJasperPdf() throws Exception{ ...
- 【mysql】centos7下mysql的安装以及基本操作
centos7使用的MariaDB,替代了早期版本默认的MySQL.MariaDB是MySQL的一个分支,由开源社区维护,采用GPL授权许可,且MariaDB完全贱人MySQL. 检查centos7下 ...
- kubernetes 集群添加node节点
kubernetes 集群添加node节点 注意,我们并不需要把新增的node ip加入到证书里重新生成!!! 下面我们以添加node03为例 一.添加集群里个节点的hostname并设置好对应主机名 ...
- Mongodb之简介
MongoDB是一个基于分布式存储的数据库,由C++语言编写,旨在为WEB应用提供的可扩展的高性能数据存储解决. MongoDB是介于关系型数据库与非关系型数据库之间的产品,也是非关系型数据库中功能最 ...