12

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

这是我控制的[网站] 。

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

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

4

2 回答 2

17

我回答了我自己的问题，关键是自定义控件在里面，<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>
于 2012-04-12T21:34:04.713 回答
2

显示自定义控制器

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

隐藏本机控制器

video::-webkit-media-controls {
  display:none !important;
}
video::-webkit-media-controls-enclosure {
  display:none !important;
}
于 2014-05-26T23:47:58.437 回答