在HTML5視頻上全屏顯示時，自定義控件仍然適用？

Question

我爲我的HTML5視頻製作了自定義控件，但我不知道如何在我全屏時仍然可以應用該CSS。

這是[website]我基於我的控件。

在此網站上，您會注意到當您單擊全屏按鈕時，自定義控件會丟失，並且視頻將恢復爲默認的<video>控件。

有誰知道如何讓這些自定義控件樣式/ CSS仍然適用於全屏時？

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> 

Answer 2

顯示自定義控制器

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

隱藏本地控制器

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