Najmądrzejszy sposób na Watermark video.js Gracz

Question

przenosimy naszego gracza z Flowplayer'a na Video.js. W naszej bieżącej instalacji Flowplayer używamy opcji, aby dodać znak wodny na naszych filmów:

flowplayer(.. , .. , {logo:{'url':'/path/to/watermark.png'}}); 

Jaki byłby najlepszy sposób replikować to zachowanie w Video.js?

Idealnie rozwiązanie będzie CSS który już próbował (za pomocą tle w górnej warstwie z wyższego z-index), ale to znak wodny jest tracona, gdy idziesz na pełnym ekranie,

Każdy pomysł? Z góry dziękuję

Answer 1

Rozwiązania HTML/CSS powinny działać, jeśli można dodać element na tym samym poziomie w hierarchii DOM, co znacznik <video>, wygląda na to, że nadal będzie wyświetlany w trybie pełnoekranowym. Być może będziesz musiał zmienić kod CSS, aby znak wodny wyglądał tak, jak chcesz, w zależności od tego, czy włączony jest tryb pełnoekranowy, czy nie, ale możesz sprawdzić rozmiar elementu wideo, aby to wykryć. Udało mi się to osiągnąć poprzez edycję DOM na stronie video.js (ja po prostu dodaje się <h1> tuż przed <video>):

http://imgur.com/a/ABItT

Answer 2

Wyjazd CSS Flowplayer w trybie pełnoekranowym pod adresem URL:

http://flowplayer.org/standalone/complete.html

To ilustruje rozwiązanie z-index dobrze - to samo można zastosować do video.js

Answer 3

napisałem plugin dla videojs th przy nałożeniu obrazu z konfigurowalnym kryciem i opcjonalnym hrefem. To może pracować dla potrzeb

https://github.com/funnyordie/videojs-imageOverlay

Answer 4

Jest to plugin do tego już od videojs i utrzymuje logo nawet jeśli chcesz obejrzeć go na pełnym ekranie. Możesz także zmienić pozycję swojego logo.

https://github.com/xbgmsharp/videojs-watermark