我已经为我的
HTML5视频制作了自定义控件,但我不知道如何在全屏时使用CSS.
这是[website]我基于我的控件.
在此网站上,您会注意到当您单击全屏按钮时,自定义控件会丢失,视频将恢复为默认<视频>控制.
当你全屏时,有谁知道如何让这些自定义控件样式/ CSS仍然适用？
解决方法
我回答了我自己的问题,关键是自定义控件位于< 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>
