在 HTML5 视频上全屏显示时，自定义控件仍然适用吗？

Posted 2023-05-07

【中文标题】在 HTML5 视频上全屏显示时，自定义控件仍然适用吗？

【英文标题】：Having custom controls still apply when go fullscreen on a HTML5 video?

【发布时间】：2012-04-24 07:31:07

【问题描述】：

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

这是我的控件所基于的[website]。

在此站点上，您会注意到，当您单击全屏按钮时，自定义控件会丢失，并且视频会恢复为默认的 <video> 控件。

有谁知道当你全屏时如何让这些自定义控件样式/CSS 仍然适用？

【参考方案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>

【讨论】：

好吧，我想我终于掌握了这个窍门。这是您全屏使用的容器，如果视频和自定义控件在该容器中，那么您很好。浏览器也不会再打扰您了，因为您不会将视频全屏显示，而且它们不需要跳入并使用其不稳定的控件来挽救这一天。

@CostaMichailidis 你让我度过了愉快的一天！ )) 在父容器上调用全屏就像魅力一样，然后我有与在小模式下相同的自定义控件，然后反应在全屏下也能正常工作。谷歌搜索了将近 2 小时的解决方案。

@NickShulzhenko 哇哦！我喜欢老黑客的生活:)

【参考方案2】：

显示自定义控制器

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

隐藏原生控制器

video::-webkit-media-controls 
  display:none !important;

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