HTML5播放器怎么双击全屏？

requestFullScreen。这是html5里面一个比较新的API。不同浏览器存在不同的方法前缀。需要区分。

可以对整个document进行全屏，或对某个元素全屏（比如vidio控件）

通常浏览器都会预先进行询问，比如d出浮层让用户确认是否要全屏。只有用户确认全屏，你的全屏 *** 作才会生效。

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 { }

HTML5网页在电脑端和手机端都全屏显示的步骤如下：

1、打开HTML5网页代码。

2、在网页头部加上新代码，让网页的宽度自适应设备的宽度。代码如下：

<meta name="viewport" content="width=device-width

initial-scale=1.0

maximum-scale=1.0

minimum-scale=1.0

user-scalable=no" />

3、在输入代码完成后，把图片包括图片DIV 的宽度设置成百分之百即可。

---