Watermark в html-плеерe

Сегодня я расскажу вам о трех бесплатных вариантах размещения водного знака в html-плеере на вашем сайте.

К сожалению, современные встраиваемые на сайт плееры в большинстве своем могут накладывать логотип (или ватермарк) на проигрываемую картинку опционально и опция эта платная. Лицензия, которая разрешает вам такую возможность, не такая уж и дорогая (около 100 баксов) и распространяется, как правило, на один домен, что сразу же заставило меня искать пути отступления, т.к. в моей задаче нужно встраивать плеер одновременно на несколько доменов.

Хочу сразу заметить, что если вы ЗА качественный продукт, не пожалейте денег и купите лицензию. (например, лицензия на топовые плееры JW Player стоит $99, на Flowplayer — $95)

 

Далее идет описание бесплатной реализации водного знака в плеере.

Предисловие: Вы понимаете, что водный знак будет встроен в плеер на стороне клиента, то есть все эти способы не защищают проигрываемый контент какими-либо копирайтами, а лишь отображают копирайт в проигрывателе.

У всех перечисленных возможностей, естественно, есть свои минусы. Так, способ №1 базируется на html5-плеере, использование которого невозможно, если вы проигрываете поток по протоколу RTMP. Способ №2 позволяет проигрывать потоки в т.ч. и по протоколу RTMP, но в нем присутствует и watermark производителя. Третий способ вовсе не проигрывает потоковое видео, только файлы. Далее подробно.

 

1. VIDEO JS — HTML5 Video Player

Скачиваете плеер, вставляете на сайт код плеера по инструкции с сайта производителя, оборачивая его в relative div, в который также помещаете absolute div c watermark в background. Выглядит это примерно так:

<div id="video">
<!-- this is parent container -->
<div class="whiteMask"></div>
<div class=""video"><!--All video-js in here--></div>
</div>
<!--end of video div-->

CSS
#video {
width:941px;
height:350px;
margin:0 0 10px 0;
position:relative;
}

.whiteMask {
background:url("../images/whiteMask.png") no-repeat scroll left top #FFF;
position:absolute;
display:block;
height:350px;
width:5px;
top:0;
right:1px;
z-index:1002;
}

2. TarantinovFLV3 -Универсальный Flash FLV плеер с поддержкой RTMP соединений, для организации просмотра online видео на cайте.

Подключаем в заголовок TrSwfObj.js

<div><head>
...
<script type="text/javascript" src="путь к директории плеера/TrSwfObj.js"></script>
...
</head></div>
<div>

 

Устанавливаем плеер в нужное место контента страницы
 
</div>
<div><body>
...
<script type="text/javascript">
var swf = new swfObj("путь к директории плеера/TarantinovFLV3.swf",650,380,"flvp");
swf.param("quality", "high");
swf.param("allowFullScreen","true");
swf.param("wmode", "opaque");
swf.flashVar("vid","rtmp://my_domain.ru/my_video.mp4");
swf.flashVar("prev","/my_prev.jpg");
swf.flashVar("logo","/logo.png");
swf.flashVar("logoUrl","http://www.tarantinov.ru/");
swf.flashVar("logoPos","TL");
swf.flashVar("logoHidden","Y");
swf.flashVar("hiddenPanel","5");
//swf.flashVar("autoplay","N");
//swf.flashVar("colorPanel","#FF0000");
//swf.flashVar("colorButtons","#FFCC00");
swf.flashVar("plugins","YouTubeApi");
swf.flashVar("buffer","3");
swf.add();
</script>
...
</body></div>
<div>

Описание переменных FlashVars для плеера

vid Адрес или путь к файлу или потоку поспроизведения
prev Путь к картинке превью. Превью должно распологаться на сервере установки плеера в противном случаи только с использованием Crossdomain.xml
logo Путь к картинке для логотипа. Разрешены только форматы JPG, GIF и PNG
logoUrl Ссылка на логотип
logoPos Позиция логотипа «TL» — Вверх-влево «TR» — Вверх-вправо «BL» — Вниз-влево «BR» — Вниз-вправо
logoHidden Прятать логотип вместе с панелью если установлено прятать «Y»-Да «N»-Нет
hiddenPanel Прятать автоматически панель в момент просмотра через [ время в секундах не меньше 5 ], по умолчанию не прятать.
autoplay Автовоспроизведение при загрузке плеера «Y»-Да «N»-Нет
addScreen Задаёт собственный расчет пропорций видео. Например источник трансляции вещает видео с разрешением 4:3 получая на вход видео 16:9 и тем самым сдавливает изображение. Задавая принудительно пропорцию источника можно исправить ситуацию. Например для 16:9 swf.flashVar(«addScreen»,»640×360″);
colorPanel Оттенок для фоновой части панели ( цвета в формате #FF0000 и.т.д. )
colorButtons Оттенок для кнопок ( цвета в формате #FF0000 и.т.д. ). Рекомендуется использовать противоположно цвету панели. Если панель темная то кнопки следует сделать светлее и наоборот.
colorBuffer NEW Оттенок для полосы загрузки буфера( цвета в формате #FF0000 и.т.д. ). Рекомендуется использовать противоположно цвету панели. Если панель темная то кнопки следует сделать светлее и наоборот.
panelAlpha NEW Прозрачность панели, «Y»-Да «N»-Нет. По умолчанию установлено «Y» и если необходимо отключить прозрачность, нужно передавать «N»
addCode NEW Включение кнопки «поделиться», «Y»-Да «N»-Нет по умолчанию «N». Для раздачи кода необходимо создать в корне сайта файл crossdomain.xml с описанием разрешенных доменов
buffer Буферизация, время в секундах
plugins Подключает дополнения к плееру. Перечисляются имена плагинов, которые будут подключены к плееру. Имена разделяются «;» точкой с запятой.

 

Скачать плеер TarantinovFLV3 + плагин YouTubeApi

 

 

3.  Плеер для вашего сайта с кликабельным логотипом и с пометкой вашего авторства в меню плеера (правой кнопки мыши). Проигрывает только файлы, не умеет работать с потоками.
Не забудьте поменять все тексты на свои ссылки


<lj-embed>
<div><embed src="Ссылка на файл плеера"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="image=Заставка&amp;amp;amp;amp;amp;file=Ссылка на видео&amp;amp;amp;amp;amp;hl=ru_RU&amp;amp;amp;amp;amp;logo.file=Ссылка на лого&amp;amp;amp;amp;amp;logo.hide=false&amp;amp;amp;amp;amp;logo.position=top-right(положение лого корректируется)&amp;amp;amp;amp;amp;logo.link=ссылка на сайт&amp;amp;amp;amp;amp;skin=ссылка на скин&amp;amp;amp;amp;amp;abouttext=Ваш текст в меню правой кнопки мыши&amp;amp;amp;amp;amp;aboutlink=ссылка на сайт&amp;amp;amp;amp;amp;autostart=true(автостарт либо false)" height="480" width="610">
</lj-embed></div>
<div>
Файл плеера — player.swf