12

HTML5 ビデオのカスタム コントロールを作成しましたが、全画面表示にしたときにその CSS を適用する方法がわかりません。

これが[Web サイト]で、コントロールの基になっています。

このサイトでは、フルスクリーン ボタンをクリックすると、カスタム コントロールが失われ、ビデオがデフォルトのコントロールに戻ることに気付くでしょう<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 に答える