扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
虽然有的网页设置了自动全屏，但是点了“x”之后退出了全屏并且视频播放停下来了，点击播放时又全屏了，但是我们可以退出全屏并继续播放，具体方法：在全屏页用两指缩小手势（不是下滑或点“x”，即刻退出全屏并继续播放视频。如果是的，请采纳。
成都创新互联公司专注于企业全网整合营销推广、网站重做改版、疏附网站定制设计、自适应品牌网站建设、H5网站设计、商城网站制作、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为疏附等各大城市提供网站开发制作服务。
requestFullScreen。这是html5里面一个比较新的API。不同浏览器存在不同的方法前缀。需要区分。
可以对整个document进行全屏，或对某个元素全屏（比如vidio控件）
通常浏览器都会预先进行询问，比如弹出浮层让用户确认是否要全屏。只有用户确认全屏，你的全屏操作才会生效。
HTML5是近十年来Web标准最巨大的飞跃。HTML5并非仅仅用来表示Web内容，它也将Web带入一个成熟的应用平台，在这个平台上，视频，音频，动画，以及同电脑的交互都被标准化。随着HTML5的发展，各个浏览器都已经或即将支持HTML5。在大潮流的推动下，微软也表示将把HTML5作为IE9的核心，并将全力投入HTML5。
很多平时最喜欢上网看视频、玩游戏的朋友经常抱怨不爽，因为网上好多视频和游戏都需要安装Flash插件，并且速度也跟不上！HTML5的出现解决了这一难题。HTML5提供了音频视频的标准接口，实现了无需任何插件支持，只需浏览器支持相应的HTML5标签。怪不得都说HTML5是Flash的终结者！Safari5、Firefox4和Chrome6等浏览器加入了HTML5技术，可以免除Flash插件的安装直接播放视频 ！
fullscreen API 接口
属性1：fullscreenElement 该属性返回当前处于全屏模式的DOM元素。
属性2：fullscreenEnabled 该属性返回当前 document 是否进入了可以请求全屏模式的状态。
方法1：requestFullscreen() 请求进入全屏模式。
方法2：exitFullscreen() 退出全屏模式。
事件1：fullscreenchange 进入/退出全屏模式切换时会触发。
事件2：fullscreenerror 进入/退出全屏模式失败时会触发。
由于fullscreen API 存在浏览器兼容性问题，所以我们在使用的时候需要进行跨浏览器处理，参考代码：
跨浏览器返回正处于全屏的元素
function fullscreenElement(){
var fullscreenEle = document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
//注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null
console.log("全屏元素："+fullscreenEle);
return fullscreenEle;
}
跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态
function fullscreenEnable(){
var isFullscreen = document.fullscreenEnabled ||
window.fullScreen ||
document.webkitIsFullScreen ||
document.msFullscreenEnabled;
//注意：要在用户授权全屏后才能准确获取当前的状态
if(isFullscreen){
console.log('全屏模式');
}else{
console.log('非全屏模式');
}
}
跨浏览器发动全屏
function lanchFullscreen(element){
if(element.requestFullscreen){
element.requestFullscreen();
}
else if(element.mozRequestFullScreen){
element.mozRequestFullScreen();
}
else if(element.msRequestFullscreen){
element.msRequestFullscreen();
}
else if(element.webkitRequestFullscreen){
element.webkitRequestFullScreen();
}
}
跨浏览器退出全屏
function exitFullscreen(){
if(document.exitFullscreen){
document.exitFullscreen();
}
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
else if(document.msExitFullscreen){
document.msExiFullscreen();
}
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
}
各浏览器fullscreenchange 事件处理
document.addEventListener('fullscreenchange', function(){ /*code*/ });
document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
document.addEventListener('mozfullscreenchange', function(){ /*code*/});
document.addEventListener('MSFullscreenChange', function(){ /*code*/});
各浏览器fullscreenerror 事件处理
document.addEventListener('fullscreenerror', function(){ /*code*/ });
document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
document.addEventListener('mozfullscreenerror', function(){ /*code*/);
document.addEventListener('MSFullscreenError', function(){ /*code*/ });
跨浏览器全屏模式下样式代码
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }
打包成Android APP为例
下载安装MyEclipse2014，Android SDK，eclipse(需配置Android开发环境)
Java和Android环境安装与配置，将另写经验分享，读者也可百度参考其他相关资料，自行安装
打开MyEclipse2014，新建一个HTML5 Mobile Application Project，命名，例如：hello
html5程序在工程www目录下编辑；
编辑好我们的html5程序，下面就要开始学习打包了
这里介绍两种打包方式：1、PhoneGap Build Service 打包
PhoneGap官网有相关教程可参考，不具体介绍
2、android SDK +eclispe 打包
android SDK +eclispe 打包(前提已配置好，android开发环境)：
Step1、启动eclipse，新建Android Application Project，即Android工程，命名，例如：hello
Step2、将前面Myeclipse2014中编辑好的HTML5程序拷至刚刚在eclipse新建hello工程对应assets目录下面
Step3、下面要做的就是如何将我们的HTML5程序在Android应用中启动，这里我们要使用Android系统自带的WebView控件（具体信息参考Adroid开发文档）---在工程下找到res-layout-activity_main.xml并打开，向里面插入WebView控件，编辑好自己想要的样式
8
Step4、在主程序入口，用刚刚编辑好的WebView控件将HTML5程序引入，此时，主体功能已实现，编译工程即可得到apk
首先建议你用html5来开发，
然后，在网页的head中增加以上这句话：
meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /
可以让网页的宽度自动适应手机屏幕的宽度。
其中：
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例
如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：
[html] view plaincopy
meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /
这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了。
关键就是调整上面的几个值了。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网