如何在全屏显示自定义视频控件

Question

更新：看不到让Firefox工作正常：（

如何在现代浏览器中以全屏模式显示自定义视频控件？

一旦我全屏播出，它们就会消失。我希望它们可用，然后我会写一些JavaScript来隐藏它们不活动，并在有人摆动鼠标时显示它们。

HTML：

.xlam

JS：

<video#video src="vid.mp4" preload poster="/images/poster.jpg">
  <iframe src="https://youtube.com/embed/id" frameborder="0" allowfullscreen>
</video>

CSS

var bigPlayButton = document.getElementById('big-play-button')
var video = document.getElementById('video')
var playPauseButton = document.getElementById('play-pause')
var fullscreen = document.getElementById('fullscreen')

function toggleFullScreen() {
  if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

fullscreen.addEventListener('click', function (event) {
  if (!video.classList.contains('fullscreen')) {
    video.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}, false)

// Detect FullScreen changes and adjust button
document.addEventListener('fullscreenchange', function (event) {
  if (document.fullscreenElement) {
    fullscreen.children[0].src = '/images/nofullscreen.svg'
    video.classList.add('fullscreen')
  } else {
    fullscreen.children[0].src = '/images/fullscreen.svg'
    video.classList.remove('fullscreen')
  }
}, false)

我正在使用此polyfill：https://github.com/neovov/Fullscreen-API-Polyfill

Answer 1

修改

根据Kaido的评论，重大变化是针对全屏标记.vidFrame而不是<video>标记。

<小时/> 如果要覆盖它们，HTML5视频的控件需要特殊处理。我假设您想要这样做，因为控件已经具有控件中内置的全屏功能。该演示实现：

• classList用于切换button#fullScreen和.on以及.off和button#playPause状态的.play个州。< / LI> 在全屏模式下，
• .pause伪类确保:fullscreen位于底部。
• .vidBar覆盖本机播放器控件所需的CSS样式。
• Shadow DOM供应商特定的方法，当然要进入和退出全屏模式。
• 没有音量滑块，静音按钮或滑块，只有全屏按钮（Fullscreen API）和播放按钮（button#fullScreen）。如果你想要它们，可以提出另一个问题。
• 详细信息在源中进行了评论。

看起来Snippet的功能不完全正常，所以这里有一个功能Plunker。如果无法访问该版本，请查看 embedded Plunker ，然后点击完整视图按钮：

<小时/>

演示

注意：SO沙箱已更改，因此此演示功能不完整，请转到前面提到的链接，或者在文本编辑器上复制并粘贴演示。

button#playPause

Answer 2

在容器元素而不是视频上使用全屏API

正如@Kaiido在评论中所说：

您必须在容器元素上而不是在容器元素上调用enterFS方法 视频一个。

所以答案是在容器元素上使用Fullscreen API而不是<video>元素。这样就可以在该容器中提供自定义控件，该容器现在全屏显示。

作为参考，这是问题中现有的enterFS（）函数：

function enterFS(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  }
}

---

我发布了此答案，因为我必须阅读三遍才能弄清楚这里发生了什么。

@ zer00ne的答案中有很多有用的信息，这些信息与具有类似问题的其他人有关，但它并不能直接回答@Costa的原始问题，以前仅在评论中得到了答复。