在全屏播放HTML5视频时，自定义控件仍然适用吗？ [英] Having custom controls still apply when go fullscreen on a HTML5 video?

问题描述

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

I've made custom controls for my HTML5 video but I don't know how to have that CSS still apply when I go fullscreen.

这是 [网站] 我已基于我的控件。

Here's the [website] I've based my controls on.

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

On this site, you'll notice that when you click the fullscreen button the custom controls get lost and the video reverts to the default <video> controls.

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

Does anyone know how to have these custom controls styling/CSS still apply when you go fullscreen?

推荐答案

我回答了我自己的问题，关键是自定义控件在< div> ，其中包含您要全屏播放的视频。在下面的代码中，此< div> 称为videoContainer。

i answered my own question, the key is that the custom controls are inside the <div> that includes the video that you want to take full screen. In my code below, this <div> is called "videoContainer".

这是我用来解决这个问题的链接。
http：// developer。 apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

Here's the link I used to figure this out. http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

这里是进入和退出的JS代码webkit和mozilla浏览器中的全屏模式：

here's the JS code for both entering and exiting fullscreen mode in webkit and mozilla browsers:

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>

这篇关于在全屏播放HTML5视频时，自定义控件仍然适用吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！