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插件的安装直接播放视频 ！

最近需求中遇到关于全屏展示的需求，于是深入了解了一下demo如下所示？

MDN介绍：

使用提供的API，让一个元素与其子元素，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

chrome下的全屏表现：

全屏API：

总共用到6个API：

浏览器前缀：

目前并不是所有的浏览器都实现了API的无前缀版本，所以我们需要针对不同浏览器，做一下API的兼容:

1.1 属性

1.1.1 浏览器是否支持全屏模式：document.fullscreenEnabled

document.fullscreenEnabled属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。

const fullscreenEnabled =

document.fullscreenEnabled ||

document.mozFullScreenEnabled ||

document.webkitFullscreenEnabled ||

document.msFullscreenEnabled

if (fullscreenEnabled) {

videoElement.requestFullScreen()

} else {

console.log('浏览器当前不能全屏')

}

1.1.2 返回全屏状态的Element节点document.fullscreenElement

fullscreenElement属性返回正处于全屏状态的Element节点，如果当前没有节点处于全屏状态，则返回null

const fullscreenElement =

document.fullscreenElement ||

document.mozFullScreenElement ||

document.webkitFullscreenElement

1.2 方法

1.2.1 使元素进入全屏模式：Element.requestFullscreen()

Fullscreen(domName) {

const element = document.querySelector(domName)// 获取dom

const methodName =

this.prefixName === ''

? 'requestFullscreen'

: ${this.prefixName}RequestFullScreen // API前缀

element methodName // 调用全屏

}

值得注意的是：调用此API并不能保证元素一定能够进入全屏模式

初始化直接全屏，会触发进入全屏失败回调。因为这样那就是容易造成欺骗，因为使用了全屏幕API，就会欺骗到人，被成功钓鱼。 大概意思是这样的

1.2.2 退出全屏：document.exitFullscreen()

document对象的exitFullscreen方法用于取消全屏

function exitFullscreen() {

if (document.exitFullscreen) {

document.exitFullscreen()

} else if (document.msExitFullscreen) {

document.msExitFullscreen()

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen()

} else if (document.webkitExitFullscreen) {

document.webkitExitFullscreen()

}

}

exitFullscreen()

调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态。

1.3 全屏事件

1.3.1 进入全屏/离开全屏，触发事件：document.fullscreenchange

当我们进入全屏和离开全屏的时候，都会触发一个 fullscreenchange 事件。

[MDN注意]：此事件不会提供任何信息，表明是进入全屏或退出全屏。

看了好久事件返回的信息，确实找不到一个值，表明这是在进入全屏，或者离开全屏！

可以说相当不人性化了！但我们可以通过检查当前是否有节点处于全屏状态，判断当前是否处于全屏模式。

document.addEventListener("fullscreenchange", function( event ) {

if (document.fullscreenElement) {

console.log('进入全屏')

} else {

console.log('退出全屏')

}

})

1.3.2 无法进入全屏时触发: document.fullscreenerror

浏览器无法进入全屏时触发，可能是技术原因，也可能是用户拒绝。

比如全屏请求不是在事件处理函数中调用,会在这里拦截到错误

screenError(enterErrorFn) {

const methodName = on${this.prefixName}fullscreenerror

document[methodName] = e =>{

enterErrorFn &&enterErrorFn(e)

}

}

1.4 全屏状态的CSS

1.4.1 :full-screen伪类

全屏状态下，大多数浏览器的CSS支持:full-screen伪类，只有IE11支持:fullscreen伪类。使用这个伪类，可以对全屏状态设置单独的CSS属性。

/* 针对dom的全屏设置 /

.div:-webkit-full-screen {

background: #fff

}

/ 全屏属性 /

:-webkit-full-screen {}

:-moz-full-screen {}

:-ms-fullscreen {}

/ 全屏伪类 当前chrome:70 不支持 /

:full-screen {

}

:fullscreen {

/ IE11支持 */

}

1.4.2 :backdrop 伪元素

全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上），可用来给下层文档设置样式或隐藏它

:not(:root):-webkit-full-screen::backdrop {

position: fixed

top: 0px

right: 0px

bottom: 0px

left: 0px

background: #999// 会将背景设为灰色的 如果你没为你的dom设置背景的话，全屏下会为灰色

}

:not(:root):-webkit-full-screen {

object-fit: contain

position: fixed !important

top: 0px !important

right: 0px !important

bottom: 0px !important

left: 0px !important

box-sizing: border-box !important

min-width: 0px !important

max-width: none !important

min-height: 0px !important

max-height: none !important

width: 100% !important

height: 100% !important

transform: none !important

margin: 0px !important

}

1.5 在项目中使用

由于我这个个项目用到的是Vue里面用到了，它对各个方法和属性做了很好的兼容，在开发中可以作参考。 用法很简单，导入库，就可以直接这样调用方法：

fscreen.requestFullscreen(element)

// replacement for: element.requestFullscreen - without calling the function

// mapped to: element.vendorMappedRequestFullscreen

我项目中js使用如下所示

import fscreen from "fscreen"

import Message from "@/components/Message"

export default {

name: "FullScreen",

components: {},

data() {

return {

isFullscreen: false

}

},

computed: {

fullscreenEnabled() {

return fscreen.fullscreenEnabled

},

},

methods: {

onTriggerClick(e) {

if (this.isFullscreen) {

this.onExitFullsreen()

} else {

this.requestFullscreen(document.querySelector(".fullscreen-content"))

}

this.isFullscreen = !this.isFullscreen

},

},

mounted() {

fscreen.addEventListener("fullscreenchange", e =>{

Message.info(this.isFullscreen ? "进入全屏" : "退出全屏")

console.log(e)

})

}

}

---