Il modo più intelligente per riprodurre video.js Player

Question

stiamo migrando il nostro lettore da Flowplayer a Video.js. Nella nostra installazione Flowplayer corrente noi usiamo la possibilità di aggiungere una filigrana sopra le nostre video:

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

Quale sarebbe il modo migliore per replicare a questo comportamento Video.js?

Idealmente la soluzione sarà un CSS che abbiamo già provato (utilizzando uno sfondo in uno strato superiore con una maggiore z-index), ma che filigrana si perde quando si va a schermo intero,

Qualche idea? Grazie in anticipo

Answer 1

Le soluzioni HTML/CSS dovrebbero funzionare, se è possibile aggiungere un elemento allo stesso livello nella gerarchia DOM come tag <video> sembra che apparirà ancora in modalità schermo intero. Potrebbe essere necessario modificare il CSS per far apparire la filigrana nel modo desiderato a seconda che lo schermo sia abilitato o meno, ma è possibile osservare la dimensione dell'elemento video per rilevarlo. Sono stato in grado di raggiungere questo modificando il DOM sul sito Video.js (ho solo aggiunto un <h1> a destra prima della <video>):

http://imgur.com/a/ABItT

Answer 2

check out il CSS Flowplayer in modalità a schermo intero al seguente URL:

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

illustra la soluzione di z-index bene - lo stesso potrebbe essere applicato a Video.js

Answer 3

ho scritto un plugin per videojs TH sovrapporrà un'immagine con un'opacità configurabile e un href opzionale. Potrebbe funzionare per le vostre esigenze

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

Answer 4

C'è un plugin per che già da videojs e mantiene il logo, anche se si vuole guardare a schermo intero. Inoltre puoi cambiare la posizione del tuo logo.

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