当在 HTML5 视频上全屏时，如何使自定义控件仍然适用？

Question

我已经为我的HTML5视频制作了自定义控件，但我不知道如何在全屏时仍然应用CSS样式。

这是我基于的[网站]。

在这个网站上，当您点击全屏按钮时，自定义控件会丢失，视频会恢复默认的<video>控件。

有人知道如何在全屏时仍然应用这些自定义控件的样式/CSS吗？

- tim peterson

Answer 1

我回答了自己的问题，关键在于自定义控件位于包含要全屏显示的视频的<div>内。 在下面的代码中，这个<div>称为“videoContainer”。

以下是我用来解决此问题的链接。 http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html 以下是进入和退出webkit和mozilla浏览器全屏模式的JS代码：

var $video=$('video');
//fullscreen button clicked
$('#fullscreenBtn').on('click', function() {
$(this).toggleClass('enterFullscreenBtn');
    if($.isFunction($video.get(0).webkitEnterFullscreen)) {
              if($(this).hasClass("enterFullscreenBtn"))
                  document.getElementById('videoContainer').webkitRequestFullScreen();                          
              else 
              document.webkitCancelFullScreen();    
    }  
    else if ($.isFunction($video.get(0).mozRequestFullScreen)) {
              if($(this).hasClass("enterFullscreenBtn"))
                  document.getElementById('videoContainer').mozRequestFullScreen(); 
               else 
                  document.mozCancelFullScreen();   
    }
    else { 
           alert('Your browsers doesn\'t support fullscreen');
    }
});

以下是HTML代码：

<div id="videoContainer">
      <video>...<source></source>
      </video>
      <div> custom controls 
            <button>play/pause</button>
            <button id="fullscreenBtn" class="enterFullscreenBtn">fullscreen</button>
      </div>
</div>

- tim peterson

---

好的，我想我终于明白了。这是指你需要将视频播放器容器全屏，并且如果视频和自定义控件都在该容器中，那么就可以了。这样浏览器也不会再干扰你了，因为你没有将视频全屏播放，它们也不需要用它们不稳定的控件来替代你。 - Costa Michailidis

@CostaMichailidis 你真是让我开心极了！)) 在父容器上调用全屏功能就像魔法一样，然后我可以在小模式下使用相同的自定义控件，React 在全屏模式下也能正常工作。我为解决这个问题谷歌了将近两个小时。 - Nick Shulzhenko

@NickShulzhenko 哇哦！我喜欢老技巧仍然有用的感觉 :) - Costa Michailidis

它能自动旋转吗？ - Thắng

Answer 2

这里有一个解决方案，使用了现代的全屏API，该API已经支持所有主流浏览器。

// `container` is the element containing the video and your custom controls

const toggleFullscreen = () => {
    if(document.fullscreenElement) {
        document.exitFullscreen();
    } else {
        container.requestFullscreen();
    }
};

- adrian

---

哟，这真是救命之恩啊，谢谢！ - Daniel K

Answer 3

显示自定义控制器

#customController{
  -------------------;
  -------------------;
  -------------------;
  z-index: 2147483647;
}

隐藏原生控制器

video::-webkit-media-controls {
  display:none !important;
}
video::-webkit-media-controls-enclosure {
  display:none !important;
}

- Mo.