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

ActionScript 3

Решил пойти в ногу со временем и опробовать себя в Action Script 3, да и уже давно пора соскакивать с AS2 ибо программирование и Adobe Flash не стоят на месте. Должен сказать что разница между AS2 и AS3 весьма ощутима, причём в пользу AS3. Идея перехода на AS3 зародилась как только стали появляться первые баги в TarantinovFLV2. Точку в уходе от AS2 поставил видео сервис YouTube, API инструменты которого всё хуже поддерживают AS2. Видео ролики работают через раз и по разному для Adobe Flash Player ActiveX и Adobe Flash Player plugin. Да и сам YouTube рекомендует AS3.

Итак, что изменилось. Прежде всего начинка плеера, благодаря AS3 она стала более продуманная и аккуратная. Раньше мне даже комментарии с трудом помогали вспомнить что у меня где - это один из плюсов AS3 которые я для себя подчеркнул. По просьбам трудящихся панель теперь можно подкрашивать в различные цвета. Автоматическое отключение при умышленном обрыве связи с RTMP сервером, оповещение об ошибке воспроизведения потока или файла. Так же по просьбам трудящихся убрал config.hs все параметры задаются непосредственно в коде встраивания. Подключение по RTMP, RTMPT, RTMPS, HTTP и другим протоколам доступным для передачи видео которое поддерживает Adobe Flash Player.

 

 

Установка плеера:

1) Создать директорию (папку) для плеера и закачать в неё файл плеера (TarantinovFLV3.swf)
2) Относительно этой директории подключить в заголовок документа (страницы) TrSwfObj.js. Если Вы уже утанавливали TrSwfObj.js то повторно устанавливать ненужно.

Подключаем в заголовок TrSwfObj.js
<head>
     ..........
          <script type="text/javascript" src="путь к директории плеера/TrSwfObj.js"></script>
     ..........
</head>

Устанавливаем плеер в нужное место контента страницы
<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>

Описание переменных 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","640x360");
colorPanel Оттенок для фоновой части панели ( цвета в формате #FF0000 и.т.д. )
colorButtons Оттенок для кнопок ( цвета в формате #FF0000 и.т.д. ). Рекомендуется использовать противоположно цвету панели. Если панель темная то кнопки следует сделать светлее и наоборот.
colorBuffer Оттенок для полосы загрузки буфера( цвета в формате #FF0000 и.т.д. ). Рекомендуется использовать противоположно цвету панели. Если панель темная то кнопки следует сделать светлее и наоборот.
panelAlpha Прозрачность панели, "Y"-Да "N"-Нет. По умолчанию установлено "Y" и если необходимо отключить прозрачность, нужно передавать "N"
addCode Включение кнопки "код-вставки", "Y"-Да "N"-Нет по умолчанию "N". Для раздачи кода необходимо создать в корне сайта файл crossdomain.xml с описанием разрешенных доменов
pseudostreaming Включение поддержки псевдостриминга MP4 и FLV
Loop Повторное воспроизведение по окончанию видео, "Y"-Да "N"-Нет по умолчанию "N".
setVol Задать начальный уровень громкости звука от 0 до 100
buffer Буферизация, время в секундах
plugins Подключает дополнения к плееру. Перечисляются имена плагинов, которые будут подключены к плееру. Имена разделяются ";" точкой с запятой.


Жесткие настройки параметров плеера

Для минимизации кода встраивания и недопущения модификаций в коде вставки плеера на сторонний сайт решил добавить так сказать жесткие настройки.

Принцип действия данного дополнения следующий - в директории с плеером создаётся файл addCode.xml, в котором жестко прописываются настройки тех или иных параметров плеера.

Это даёт возможность не упоминать параметры плеера которые практически остаются всегда неизменными. Например такие вещи как логотип, положение логотипа, ссылка на логотип, затухание и прозрачность панели.

Так же это не позволяет модифицировать код вставки например полученном раннее коде вставки для размещения плеера на других сайтах, можно было менять значения переменных на свой лад. Например подменить логотип и ссылку на него, установленную цветовую гамму и.т.д.


Структура файла addCode.xml
<?xml version="1.0" encoding="utf-8"?>
<addCode>
   <Embed>
      <logo>/путь к файлу логотипа/logo.png</logo>
      <logoUrl>http://www.tarantinov.ru/</logoUrl>
   </Embed>
</addCode>

Запретить RTMP подключения на стороннем сайте.

Некоторые RTMP серверы имеют защиту от подключения на сторонних сайтах. Но если плеер способен принимать параметры через строку адреса, то такая защита обходится за счет установки плеера непосредственно с сайта где разрешение на подключение есть. Для того что бы это не представлялось возможным в TarantinovFLV3, добавляем параметр rtmpSecure в addCode.xml
В параметре rtmpSecure перечисляются тегами linkDomain имена доменов к которым запрещено подключаться плееру находясь на стороннем ресурсе. Так же имеется возможность вносить исключения. В параметре rtmpAllow тегами linkDomain перечисляются домены на которых подключение разрешено не смотря на запрет rtmpSecure.

Структура файла addCode.xml
<?xml version="1.0" encoding="utf-8"?>
<addCode>
   <Embed>
      <logo>/путь к файлу логотипа/logo.png</logo>
      <logoUrl>http://www.tarantinov.ru/</logoUrl>
   </Embed>
   <rtmpSecure>
      <linkDomain>tarantinov.ru</linkDomain>
      <linkDomain>mysite.ru</linkDomain>
   </rtmpSecure>
   <rtmpAllow>
      <linkDomain>mysite1.ru</linkDomain>
      <linkDomain>mysite2.ru</linkDomain>
   </rtmpAllow>
</addCode>

Псевдостриминг MP4 и FLV.

Псевдостриминг - загрузка файла с указанной позиции, включить поддержку псевдостриминга можно с помощью параметра pseudostreaming

swf.flashVar("pseudostreaming","Y");


К примеру в сервере Nginx есть такие модули как ngx_http_flv_module и ngx_http_mp4_module, которые могут возвращать видео с указанного смещения а не от начала. При использовании MP4 запрос выглядит так video.mp4?start=[время смещения (Секунды)], при FLV video.flv?start=[число байт смещения]. При псевдостриминге FLV файлов необходимо наличие массива точек смещения, то есть массива с позиций ключевых кадров по отнощению к количеству байт ( OnMetaData["keyframes"]["filepositions"] ) только при наличии этих данных возможна отправка нужного количества байт в запросе т.к. воспроизведение FLV должно начинаться с ключевого кадра а не с произвольного места. Для вживления таких данных, если они отсутствуют используется утилита Yamdi. При отсутствии OnMetaData["keyframes"] плеер проигрывает видео в обычном режиме (Buffering).

RTMP ( LIVE )

HTTP ( Buffering )

HTTP ( Псевдостриминг MP4 )

HTTP ( Псевдостриминг FLV )

RTMP ( VOD ) + плагины pList и YouTubeApi

YouTube API


[ 127kb ] Скачать плеер TarantinovFLV3 » [ Последнее обновление: 09.12.2016 ]



Комментарии