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; 
}