Самый лучший способ Watermark video.js Player

Question

Мы переносим нашего игрока с Flowplayer на Video.js. В нашей текущей установке Flowplayer мы используем опцию для добавления водяных знаков на наши видео:

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

Какой бы лучший способ повторить это поведение в Video.js?

В идеале решение будет в CSS, который мы уже пробовали (с использованием фона в верхнем слое с более высоким индексом г) Но водяной знак теряется, когда вы идете на весь экран,

Любая идея? Заранее спасибо

Answer 1

HTML/CSS решения должны работать, если вы можете добавить элемент на том же уровне в иерархии DOM, что и тег <video>, похоже, он все равно будет отображаться в полноэкранном режиме. Возможно, вам придется изменить CSS, чтобы сделать водяной знак таким, как вы хотите, в зависимости от того, включен ли полноэкранный режим или нет, но вы можете посмотреть размер элемента видео, чтобы обнаружить это. Я был в состоянии достигнуть этого путем редактирования DOM на сайте video.js (я просто добавил <h1> прямо перед <video>):

http://imgur.com/a/ABItT

Answer 2

ЗАКАНЧИВАТЬ Flowplayer CSS в полноэкранном режиме на данном веб-сайте:

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

Это иллюстрирует решение г-ну указательный - то же самое может быть применено к video.js

Answer 3

Я написал плагин для videojs го at'll накладывает изображение с настраиваемой непрозрачностью и необязательным href. Это может работать для ваших нужд

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

Answer 4

Существует плагин для этого уже с videojs и он держит логотип, даже если вы хотите посмотреть его в полный экран. Также вы можете изменить положение своего логотипа.

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