fullscreen 了解一下

[Jenna-u]

javascript/火狐浏览器上(video)全屏显示不出广告的问题

排查问题原因：

首先想到的解决方法，试着从层级定位来解决。改变当前节点的z-index将其设置到最高9999; 理想很丰满，现实很残酷。失败告终☹️…
google搜索 css 全屏，发现有个css的:fullscreen这个伪类，抱着试一试的心态。在这个广告元素上加上了这个伪类：

.ad:-moz-full-screen {
   display: block;
   z-index: 9999;
 }

结果还是不生效，扑街💔… 至少get到了个新方法，想想还是很开心啊！但是问题还是没解决啊？

Finally，功夫不负有心人终于找到了解决办法。发现video处于全屏下，广告节点一直和video处于同一个父级。player-video这个父级下3个子节点都不是requestFullScreen元素里。要想全屏下广告显示就要让play-advertisement放到已是requestFullscreen的元素中去。

我去打印了<div class="play-advertisement">...</div>这个节点的Element.requestFullscreen()

被拒绝了，那这么说初始化就要在video播放器里。继续找含有这个属性的节点，展开player这个div，里头包含的了多个div，发现了video标签，我把<div class="play-advertisement">...</div>这个节点移入到了和video标签的父节点下，问题解决了。

注意事项:

:-webkit-full-screen 的使用就像我们平时写:hover那样操作，我们需要谁hover变色我们就改变那个元素就好，例如：

.wrap:-webkit-full-screen {
	width: 100vh;
  height: 100vh;
}

.wrap:-webkit-full-screen .text {
	color: #f60;
}

如果你的需求是这种情况，文档已处于全屏并有video播放器，并且视频播放器用的是默认的control操作，点击video的全屏按钮，这个时候你想要在视频全屏状态下还要显示广告。那么广告是不会出现的，因为相当于开了两个窗口。当前全屏状态下的视频遮住了广告这个全屏窗口，你改变z-index也于事无补。解决办法就是自己实现视频的controls功能

videojs的全屏操作并没有使用视频默认::controls::，而是自己去实现了视频的播放、暂停、进度条、progressbar、音量，全屏等功能。然后再配合css:fullscreen这个伪类去实现在全屏下的样式呈现。

具体可参见我的写的demo：
https://codesandbox.io/s/147n4oovjl
需要注意的是需要点击右上角的标红按钮，这是个iframe，全屏操作被阻止了。

总结：

1. 让元素在全屏下展示，需要用户手动去触发
2. 保证需要在全屏下要展示的节点包含在同一个父级里，并设置父级的requestFullScreen()
3. 已在全屏节点下可以使用css的:fullscreen去改变样式
   最后安利一下codesandbox真的蛮好用的!!!

参考：

打造全屏体验  |  Web  |  Google Developers
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen
https://github.com/videojs/video.js