Question

有没有人能够使用Video.js播放器创建全屏叠加层？我们正在寻找一种在视频上显示div的方法，即使在全屏模式下也可以使用它。

Answer 1

这是我在最近使用JQuery UI对话框的项目中所做的，但该解决方案适用于您想要在视频上显示的任何元素。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#overlay').dialog({
        width: $(window).width() * .8,
        height: 100,
        position: { my: "center", at: "bottom", of: window },
        autoOpen: false,
        zIndex: 2147483647
    });
});
int = setInterval(function(){checkNews()},checkNewsInterval);
function checkNews() {
    var url = 'news.php';
        $('#overlay').load(url, function() {
        $('#overlay').dialog('open');
        return false;
}
</script>
<body>
<div id="video-container">
    <video id="myvideo" class="video-js vjs-default-skin" controls
    preload="auto"  poster="" data-setup="{}">
        <source src="<you_video_source>" type='video/mp4'></source>
        <param name="allowfullscreen" value="true" />
    </video>
</div>
<div id="overlay"></div>
</body
</html>

诀窍是财产：

zIndex: 2147483647

可以在对话框设置中设置，也可以在CSS中设置：

#overlay {
    z-index: 2147483647;
}

使用Video.js全屏显示HTML Overlay

1 个答案: