我已经为我的HTML5视频制作了自定义控件,但是我不知道如何在全屏显示时仍然应用CSS。
这是我基于控件的[website]。
在此站点上,您会注意到,当您单击全屏按钮时,自定义控件会丢失,并且视频将还原为默认的<video>
控件。
有没有人知道如何在全屏显示时仍然应用这些自定义控件样式/ CSS?
我回答了我自己的问题,关键是自定义控件在<div>
内部,其中包含要全屏显示的视频。在下面的代码中,此<div>
被称为“ videoContainer”。
这是用于在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>
显示自定义控制器
#customController{
-------------------;
-------------------;
-------------------;
z-index: 2147483647;
}
隐藏本机控制器
video::-webkit-media-controls {
display:none !important;
}
video::-webkit-media-controls-enclosure {
display:none !important;
}
您救了我的命!!!!!!!! .......