当HTML5视频全屏显示时，自定义控件仍然适用吗？
当HTML5视频全屏显示时，自定义控件仍然适用吗？
提问于 2012-04-12 07:23:25
我已经为我的HTML5视频制作了自定义控件，但我不知道如何在全屏时仍然应用该CSS。
这是我的控件所基于的[website]。
在这个网站上，你会注意到，当你点击全屏按钮时，自定义控件会丢失，视频会恢复为默认的<video>控件。
有没有人知道如何让这些自定义控件样式/CSS仍然适用，当你进入全屏？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-04-13 05:34:05
我回答了我自己的问题，关键是自定义控件位于<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>Stack Overflow用户
发布于 2014-05-27 07:47:58
显示自定义控制器
#customController{
-------------------;
-------------------;
-------------------;
z-index: 2147483647;
}隐藏本机控制器
video::-webkit-media-controls {
display:none !important;
}
video::-webkit-media-controls-enclosure {
display:none !important;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10115345
复制相关文章
相似问题
腾讯云开发者
