使用Video.js在全屏幕中進行HTML疊加

是否有人能夠使用Video.js播放器創建全屏疊加？我們正在尋找一種在視頻上顯示div的方式，即使在全屏模式下也可以使用它。使用Video.js在全屏幕中進行HTML疊加

2012-12-28 Chad

你找到一個好的解決辦法？ – catalinux

這是我在最近使用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; 
}

來源

2013-07-19 13:59:09 savedario

它在Chrome中不適用於我。其他解決方案？ – catalinux

不幸的不是。通過視頻播放新聞是我們沒有在製作過程中開發的一個功能，所以我停止了檢查。僅供參考，「魔術」數字是整數可容納的最高值（2^31）-1。嘗試一個更高的數字？ – savedario

我剛剛找到舊的測試腳本，它仍然可以在Chrome 31.0上運行。也許你的問題在別處。 – savedario

使用Video.js在全屏幕中進行HTML疊加

回答

相關問題