在視頻播放器頂部的覆蓋內容層

Question

我想覆蓋一個視頻播放器的頂部，這是一個流媒體的視頻上下文。這可能嗎？

因此，圖層將位於視頻播放器的頂部，理想情況下它也能夠具有透明度。

此外，當視頻播放器是'fullscreened'，即。用戶點擊播放器上的全屏圖標，圖層也將移動/展開至相同的比例。

我不知道這是可能的使用jQuery嗎？

請問有人請給我一個指導嗎？可能嗎？有沒有人有任何例子？

非常感謝！ Ryan

Answer 1

好像這個問題有兩個不同的部分。

1. 顯示一個透明的div在視頻播放器
2. 擴大股利支付球員只有在一定條件下，用工作的公平位全屏視圖

這都是可能的，但。最重要的是，你需要控制視頻播放器嵌入頁面的方式，而視頻播放器需要有一個JavaScript API來觸發div的調整。

如果視頻播放器是Flash SWF，則僅當SWF嵌入參數「wmode」設置爲「opaque」（或「transparent」）時纔可以使用1。基本上，wmode設置告訴Flash像一個普通的HTML元素一樣工作，而不是通過位於其上的任何東西來顯示。 （更多關於這個here。）最重要的是，視頻播放器的CSS「z-index」屬性必須低於div的z-index。 （z-index是堆棧順序，其中0是底部，1是上面的圖層）。

只要您的視頻播放器容器具有position：relative，您就可以給出您的div位置：絕對的CSS和相對於具有頂部和左側屬性的視頻播放器進行定位。

使div透明也是可行的。但是如果你希望它對於不透明的內容是半透明的，它會變得有點複雜。以下是CSS for transparency上的內容，以及jiggery-pokery上的內容，您需要執行此操作才能使內容顯示inside a translucent div。

有一個例子here其中的元素已經在JW媒體播放器的頂層進行了分層，這會給你一些想法如何完成這部分。

2將需要一些Javascript，它可以用JQuery或Mootools完成，或者只是簡單的Javascript。最重要的是，視頻播放器需要在頁面調整到全屏時告訴頁面的其餘部分：當發生這種情況時，您的Javascript可以適當調整div的大小。下面是另一個很好的視頻播放器FlowPlayer的一些代碼，它展示瞭如何使用listen for the "onFullScreen" event。

$f("player1", "flowplayer.swf", { 
    onFullScreen: function(){ 
     // div resizing stuff here 
    } 
}); 

在onFullScreen函數中，您將放置代碼來調整div的大小。當玩家縮水時，你還需要使用另一個偵聽器來縮小它的大小。

Answer 2

也許這個GitHub資源可以提供幫助。這提供了與JWPlayer完全相同的完整的JavaScript堆棧。 JWPlayer免費提供水印。

你可以使用JWPlayer（它的開源太）的main.js文件==============的

內容 //把插件參考和配置參數（」文本'），以將嵌入腳本

jwplayer('id-of-container').setup({ 
    file: '/path/to/my/video.mp4', 
    plugins: { 
    '/path/to/overlay.js': { 
     text: 'Text that you want to go within the overlayed banner' 
    } 
    } 
}); 

結束==============================

= === overlay.js文件的內容=============

(function(jwplayer) { 

    var overlay = function(player, config, div) { 

    var setupOverlay = function() { 
     div.innerHTML = config.text; 
    }; 

    var showOverlay = function() { 
     setStyle({ 
     opacity: 1 
     }); 
    }; 

    var hideOverlay = function() { 
     setStyle({ 
     opacity: 0 
     }); 
    }; 

    var setStyle = function(object) { 
     for(var style in object) { 
     div.style[ style ] = object[ style ]; 
     } 
    }; 

    // Matches our text container to the size of the player instance 
    this.resize = function(width, height) { 
     setStyle({ 
     position: 'absolute', 
     margin: '0', 
     padding: '10px 15px 10px', 
     background: 'rgba(0, 0, 0, .7)', 
     color: 'white', 
     fontSize: '12px', 
     width: '100%' 
     }); 
    }; 

    // Bind player events 
    player.onReady(setupOverlay); 
    player.onPlay(hideOverlay); 
    player.onPause(showOverlay); 
    player.onComplete(showOverlay); 
    }; 

    jwplayer().registerPlugin('overlay', overlay); 

})(jwplayer); 

這提供了與JWPlayer完全相同的完整的JavaScript堆棧。 JWPlayer免費提供水印。