Рис.9. Веб-плеер Flow Player.
Flowplayer известен своим API, который является объектно-ориентированным, а не простым набором функций, так же есть штатный плагин для взаимодействия с библиотекой jQuery и взаимодействия с json объектами. Базовые объекты плеера показаны в таблице 1.
Tаблица 1. Базовые объекты Flow Player.
Player | Управляет самим плеером, событиями и копками |
Clip | Содержит информацию о проигрываемом ролике – его длительность, формат и т. д. |
Playlist | Массив с клипами |
Plugin | Управляет плагинами, их размерами и загружает в них |
С помощью объекта plugin в плеер можно загружать swf файлы, которые никак не связаны с его интерфейсом. Ниже приведены плагины, используемые плеером.
· Плагины для работы с сетями доставки контента (CDN), примечательны тем, что если видеопоток с одного сервера прекращается, плеер переключается на другой сервер.
· Плагины для работы с рекламными сетями, которые в отличии от JW плеера, с открытым кодом.
· Плагин captions отображает субтитры, имеет встроенные парсеры различных XML файлов.
· Плагин content оперирует с html кодом
Объектно-ориентированная структура API дает возможность конфигурировать плеер и поведение графических объектов в нем, не компилируя для этого специальных swf-объектов. Это самое главное преимущество данного плеера по сравнению с другими. Недостаток данного плеера в том, что его некоторые компоненты работают крайне не стабильно, и даже на официальном сайте не всегда работают примеры. Так, например, не работает псевдостриминг, поэтому в данной работе использовался JW player, у которого нет такой проблемы.
JW player (рис. 10) – наиболее популярный и гибкий медиаплеер, поддерживает все форматы, что и среда Flash Player. Также поддерживает различные форматы плейлистов, включая XML, и имеет ряд настроек и JavaScript API.[12]
Рис.10. Веб-плеер Jw Player.
Плеер имеет несколько десятков плагинов, модулей для различных систем, встроенные XML парсеры, может работать без включенного в браузере JavaScript. Плеер легко устанавливается и его код в html документе занимает несколько строк.
Штатные плагины подключаются с сайта, достаточно просто прописать их название, то есть пользователю вовсе не обязательно указывать путь до swf-объекта.
АPI плеера не так функционален, как у Flow Player, но зато писать плагины намного легче, так как это можно делать не только в среде Adobe Flex Builder, а еще и в Adobe Flash.
Коммерческая лицензия на использование JW плеера для одного сайта составляет 20€, что почти в 3 раза меньше чем у Flowplayer.
Для данной работы был выбран JW player, потому что он работает стабильнее, ниже стоимость коммерческой лицензии и легче создавать свои плагины.
3.2. Установка веб-плеера на странице
На сегодняшний день используется два метода встраивания swf объектов в страницу html – c помощью тэга <EMBED> и с помощью JavaScript библиотеки SWFObject.[13]
3.2.1. Установка с помощью тэга <EMBED>
Элемент <EMBED> используется для загрузки и отображения объектов (например, видеофайлов, flash-роликов, некоторых звуковых файлов и т. д.), которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагином, или запуска вспомогательной программы.
Спецификация HTML 4.0 рекомендует использовать тег <OBJECT> для загрузки внешних данных вместо тега <EMBED>. Однако некоторые браузеры не отображают таким образом нужную информацию, поэтому наилучшим вариантом будет поместить <EMBED> внутрь контейнера <OBJECT>.
Вид внедренного объекта зависит от установленных в браузере плагинов, типа загружаемого файла, а также от параметров тега <EMBED>.
Основные параметры:
· align – определяет, как объект будет выравниваться на странице и способ его обтекания текстом;
· height – высота объекта;
· hidden – указывает, скрыть объект на странице или нет;
· hspace – горизонтальный отступ от объекта до окружающего контента;
· pluginpage – адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру;
· src – путь к файлу;
· type – MIME-тип объекта;
· vspace – вертикальный отступ от объекта до окружающего контента;
· width – ширина объекта.
Ниже показан пример подключения плеера с плагинов.
<embed
src="http://www. /player. swf"
width="400"
height="320"
allowscriptaccess="always"
allownetworking="all"
allowfullscreen="true"
flashvars="file=/upload/flash. flv&plugins=viral-1"
/>
3.2.2. Установка c помощью библиотеки SWFObject
SWFObject — это популярный способ публикации Flash-роликов на JavaScript. По сравнению с классическим HTML, он имеет ряд преимуществ:
· кроссбраузерный и соответствует стандартам;
· позволяет избежать необходимости активации Flash-ролика пользователем в Internet Explorer (IE Eolas Update);
· можно задавать альтернативный контент в случае, если у пользователя не установлен Flash-плеер или стоит старая версия;
· можно проверять версию Flash-плеера и предлагать обновиться, если та устарела, либо запускать экспресс-инсталляцию Flash-плеера, если он не установлен;
· можно динамически загружать/выгружать плееры без перезагрузки страницы.
SWFObject позволяет внедрять Flash двумя различными методами.
· Статическом метод – публикации Flash и альтернативный контент внедряются с помощью стандартной разметки, а JavaScript используется для решения проблем, непреодолимых с помощью разметки.
· Динамический метод публикации основан на замене альтернативного контента Flash контентом в случае, если есть достаточно новая версия Flash плеера и поддержка JavaScript.
Преимущества статического метода публикации:
· используется стандартная разметка:
· механизм внедрения Flash контента не зависит от JavaScript, благодаря чему Flash будет доступен значительно большей аудитории.
При статической публикации SWFObject использует метод вложенных объектов (с условными комментариями для Internet Explorer, начиная с версии 6). Это наиболее оптимальная кроссбраузерная разметка, соответствующая стандартам и позволяющая задать альтернативный контент. При этом требуется дублирование объявления object (внешний object предназначен для Internet Explorer а внутренний object для остальных браузеров), поэтому, если нужно определить атрибуты или param для object, то их нужно продублировать для внешнего и внутреннего объектов.
Обязательные атрибуты:
· classid (только для внешнего object, значение всегда clsid:D27CDB6E-AE6D-11cf-96B8-)
· type (только для внутреннего object, значение всегда application/x-shockwave-flash)
· data (только для внутреннего object, определяет URL SWF файла)
· width (для обоих элементов object, определяет ширину SWF)
· height (для обоих элементов object, определяет высоту SWF)
Обязательные элементы param:
· movie (только для внешнего элемента object, определяет URL SWF - файла)
Ниже представлен пример установки плеера на страницу статическим методом.
<script type="text/JavaScript" src="swfobject. js"></script>
<script type="text/JavaScript">
swfobject. registerObject("player","9.0.98","expressInstall. swf");
</script>
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-" name="player" width="328" height="200">
<param name="movie" value="player. swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=video. flv&image=preview. jpg" />
<object type="application/x-shockwave-flash" data="player. swf" width="328" height="200">
<param name="movie" value="player. swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=video. flv&image=preview. jpg&plugins=viral-1'" />
<p><a href="http://get. /flashplayer">Get Flash</a> to see this player.</p>
</object>
</object>
Преимущества динамического метода публикации:
· позволяет обойти механизмы активации активного контента в Internet Explorer 6/7 и Opera 9+;
· интегрируется в JavaScript приложения.
Динамический метод публикации заменяет альтернативный HTML контент на Flash контент в случае, если есть достаточная поддержка JavaScript и Flash. При использовании динамического метода публикации нужно создать HTML контейнер с альтернативным контентом и задать для него id.
У данного метода пять обязательных и четыре опциональных параметра:
· wfUrl (обязательный) URL SWF файла
· id (обязательный) id HTML элемента (содержащего альтернативный контент) который должен быть заменен на Flash контент
· width (обязательный) ширина SWF
· height (обязательный) высота SWF
· version (обязательный) версия Flash плеера необходимого для данного SWF (формат: "major. minor. release")
· expressInstallSwfurl (опциональный) задает URL express install SWF и активирует Adobe express install
· flashvars (опциональный) переменные передаваемые Flash в виде пар имя:значение
· params (опциональный) элементы params вложенные в object в виде пар имя:значение
· attributes (опциональный) атрибуты элемента object в виде пар имя:значение
Ниже показаны два способа, как можно установить на страницу плеер с плагином.
<script type='text/JavaScript' src='swfobject. js'></script>
<div id='mediaspace'>This div will be replaced</div>
<script type="text/JavaScript">
var so = new SWFObject('http://www. /player. swf',
'mpl','400','320','9');
so. addParam('allowscriptaccess','always');
so. addParam('allownetworking','all');
so. addParam('allowfullscreen','true');
so. addParam('flashvars',
'&file=/upload/flash. flv&plugins=viral-1');
so. write('mediaspace');
</script>
<script type='text/JavaScript' src='swfobject. js'></script>
<div id='mediaspace'>This div will be replaced</div>
<script type="text/JavaScript">
var so = new SWFObject('http://www. /player. swf',
'mpl','400','320','9');
so. addParam('allowscriptaccess','always');
so. addParam('allownetworking','all');
so. addParam('allowfullscreen','true');
so. addVariable('file', '/upload/flash. flv');
so. addVariable('plugins', 'viral-1');
so. write('mediaspace');
</script>
Плагин и его конфигурационные переменные устанавливаются с помощью параметра flashvars или метода addVariable для значения plugins, при этом название конфигурационной переменой плагина имеет вид “имя_плагина. имя_переменной”.
С помощью SWFObject очень удобно определять версию плеера, находящегося у пользователя и давать ему ссылку в альтернативном тексте на скачивание новой версии.
3.2.3. Управление плеером на странице
ActionScript взаимодействует с JavaScript с помощью функций обратного вызова. У плеера есть большой набор этих функций, с помощью которых можно получать данные о состоянии плеера и управлять его действиями. Можно написать свои собственные функции.
Ниже показано, как можно инициализировать переменную связанную с плеером и использовать функцию обратного вызова c параметрами.
<script>
var player = document. getElementById('ID_of_the_player');
player. Callback_function(parametrs) ;
</script>
3.3. Модификация веб-плеера
Функционал плеера можно расширить с помощью плагинов. Плагин – это отдельный файл swf, который загружается в плеер в период его загрузки. Плагин взаимодействует с плеером через API плеера.
В данной работе было написано четыре плагина для разных задач. Также был изменен сам плеер для улучшения отображения оформления в полноэкранном режиме. До этого оформление растягивалось вместе с видео и теряло качество.
3.3.1. Плагин для интерактивного голосования Voting
Данный плагин (рис.11) отображает в окне плеера табло с голосованием, включающее вопрос, варианты ответов и количество отданных голосов в виде столбцов. Плагин размещается в нижней части окна и имеет полупрозрачный темный фон. Плагин растягивается по ширине экрана и изменяет свою высоту в зависимости от количества пунктов голосования. Плагин поддерживает не больше 6 вариантов ответа.
Рис.11. Плагин Voting.
3.3.1.1. Включение и отключение
При установке плагина в меню появляется новая кнопка. Чтобы отключить или включить окно с голосованием, надо нажать на эту кнопку, при этом если окно не активно, то кнопка будет серого цвета, а если активно, то черного (рис.12).
Рис.12. Кнопка включения/выключения
3.3.1.2. Установка плагина
Чтобы установить плагин, надо прописать одну строку в код при установке плеера в HTML документе. В значении plugins надо прописать абсолютный или относительный путь до файла voting. swf.
Данных плагин имеет следующие конфигурационные переменные :
· time (значение по умолчанию -5000) – задает интервал в миллисекундах, через который плагин делает запрос на сервер для обновления вопроса или результата голосования;
· getvote – адрес внешнего файла, который передает информацию о голосовании;
· setvote – адрес внешнего файла, который получает информацию о том, за какой вариант проголосовал пользователь.
3.3.1.3. Требования к внешнему файлу
Файл должен обмениваться с плагином информацией по протоколу HTTP методом POST.
Файл, передающий информацию, может принимать от плагина переменную showvotes, которая определяет, будет ли файл передавать вопрос с вариантами ответов (значение “false”), или информацию о результатах голосования (значение “true”). Отсылаемая плагину информация должна быть представлена в виде строки с переменными Flash и выгдядеть так:
· id=номер вопроса&question=текст вопроса&var1=ответ1&var2=ответ2..&var6=ответ6
· id=номер вопроса&vote1=число голосов за первый ответ..vote6= число голосов за шестой ответ
Файл, принимающий информацию должен уметь принимать от плагина переменные vote и vid. Переменная vote определяет номер варианта, за который проголосовал пользователь, а vid – номер строки в базе данных, где находится данный вопрос. Обе переменные относятся к целочисленному типу.
Назначение переменных получаемых плагином:
· id – номер текущего голосования;
· question – вопрос;
· var1..var6 – пункты голосования;
· vote1...vote6 – количество голосов, которые имеет соответствующий пункт.
3.3.2. Плагин для отображения медиаконтента Captions
Captions – плагин для отображения медиаконтента в окне плеера (рис.13). Плагин отображает 4 блока графического оформления – титры, логотип, информация о событии и о трансляции, подробнее об этом написано в главе 3.5.1.
Рис.13. Плагин Captions.
3.3.2.1. Включение и отключение
Если плагин установлен, то он включен по умолчанию, отключение происходит по клику на кнопку “CC”, появившейся в меню после установки. В этом случае кнопка будет серого цвета.
3.3.2.2. Установка плагина
Плагин функционирует только в связке с плагинами Live и Archive при прямом и эфире и в видеоархиве соответственно. Чтобы установить плагин, надо при установке плеера написать в значение plugins путь до файлов captions. swf, live. swf или archive. swf.
Конфигурационные переменные плагина приведены в таблице 2.
Таблица 2. Конфигурационные переменные Captions.
название | значение по умолчанию | описание |
state | true (Boolean) | true – при запуске плагина оформление включено false – при запуске плагина оформление отключено |
screen4_3 | false (Boolean) | true – в полноэкранном режиме, независимо от пропорции сторон монитора, пропорции окна с оформлением – 4:3, false – окно с оформлением растягивается по всему экрану |
auto | 5000 (Number) | время отображения титров, выраженное в миллисекундах |
3.3.2.3. Взаимодействие с плагинами Live и Archive
У плагина Captions есть публичные функции, приведенные в таблице 2. Используя эти функции, плагины посылают команды плагину Captions для отображения соответствующего медиаконтента.
Таблица 3. Публичные функции плагина Captions.
функция | параметры | описание |
showTitle | text1:String, text2:String | отображение титров, параметры содержат текст титров |
showLogo | logoinfo:String | отображение логотипа, параметр задает поведение логотипа |
showCast | castinfo:String, yearinfo:String | отображение информации о трансляции, параметры задают тип эфира и год архива |
showEvent | placeinfo:String, eventinfo:String | отображение информации о событии, параметры задают место и описание события |
Таблица 3. Публичные функции плагина Captions.
3.3.3. Плагин Live для загрузки информации о медиаконтенте
Плагин для загрузки информации о медиаконтенте в прямом эфире из внешнего файла и ее передачи плагину Captions.
Плагин периодически опрашивает внешний файл и не имеет графического отображения.
3.3.3.1. Установка плагина
Плагин устанавливается вместе с плагином Captions, при этом прописывается путь до файла live. swf, и имеет конфигурационные переменные, приведенные в таблице 4.
Таблица 4. Конфигурационные переменные Live.
название | значение по умолчанию | описание |
time | 4000 | частота опроса внешнего файла, выраженная в миллисекундах |
url | - | адрес внешнего файла |
3.3.3.2. Требования к внешнему файлу
Передаваемая информация из файла должна быть представлена в виде строки с переменными Flash, как показано ниже.
datatype=идентификатор_блока&id=номер_строки_в_базе_данных&text1=верхние_титры&text2=нижние_титры&logo=отображение_логотипа&cast=тип_трансляции&year=год&place=место&event=событие
Значения переменных Flash должны быть такими, как в таблице 5 в главе 3.4.2. Переменная type играет роль идентификатора отображаемого блока – она сообщает плагину, что надо передать информацию о конкретном блоке. Переменная type может также иметь значение “all” , это означает что надо передать информацию о всех блоках, подробнее о взаимодействии с внешним файлом в главе 3.4.2.
Плагин должен обмениваться информацией с внешним файлом по протоколу http методом POST.
3.3.4. Плагин Archive для загрузки глав медиаконтента
Плагин для загрузки информации о медиаконтенте в видеоархиве из внешнего файла и ее передачи плагину Captions. Плагин имеет функцию обратного вызова updateXML(), доступную из JavaScript, которая обновляет информацию из внешнего файла. Плагин опрашивает внешний файл один раз при загрузке и при вызове данной функции из JavaScript. Плагин передает параметр внешнему файлу – id клипа, и получает ответ в виде XML.
3.3.4.1. Установка плагина
Плагин устанавливается вместе с плагином Captions, при этом прописывается путь до файла archive. swf, и имеет конфигурационную переменную “xml” в которой прописывается адрес внешнего файла. Плагин Archive в определенные моменты, в соответствии со временем начала и конца главы, посылает команду плагину Captions для отображения соответствующего блока медиаконтента.
3.3.4.2. Требования к внешнему файлу
Плагин должен обмениваться информацией с внешним файлом по протоколу http методом POST. Передаваемая информация из файла должна быть представлена в виде дерева XML, показанного ниже.
<archive>
<content>
<caption>
<begin>время начала главы(hh:mm:ss)</begin>
<end> время конца главы(hh:mm:ss)</end>
<text1>верхние титры</text1>
<text2>нижние титры</text2>
<logo>состояние логотипа</logo>
<cast>тип трансляции</cast>
<year>год, если архив</year>
<place>место проведение события</place>
<event>heat</event>
</caption>
<caption>
.
.
.
</caption>
</archive>
</content>
3.4. Интеграция средств графического оформления эфира в среду Symfony
Проекты Symfony имеют модульную структуру, у каждого модуля есть своя таблица в базе данных, он имеет так называемые действия – сценарии выполняющие вычисления, и сценарии которые отображают результаты вычислений на странице сайта. На одной странице может быть несколько компонентов разных модулей. Интеграция в среду Symfony представляет из себя создания такого модуля и размещение модифицированного веб-плеера на определенных страницах. [14]
3.4.1 Установка веб-плеера на страницу
Веб плеер можно устанавливать на страницу с помощью тэга <EMBED> либо с помощью JavasScript библиотеки SWFObject статическим или динамическим методом. Подробнее об это написано в главе 3.2. В данной работе использовались оба метода.
3.4.2. Модуль для оформления прямого эфира
Для интернет-канала miem. tv был написан модуль с помомщью Symfony Framework, который управляет медиаконтентом в прямом эфире. Схема взаимодействия показана на рисунке 14. Информация из форм страницы manager отправляется в действие caption/set, который помещает эту информацию в базу данных в таблицу Сaption. Помимо информации из полей в сценарий также добавляются параметр с id плеера (player_id), и параметр блока графического оформления (type), к которому адресованы передаваемые данные. Структура таблицы Caption показана в таблице 5.
Таблица 5. Струтура таблицы caption в базе данных.
атрибут | значение | пояснение |
id | натуральные числа | Первичный ключ, заполняется автоматически |
player_id | натуральные числа | Номер плеера |
text1 | текст | Верхние титры |
text2 | текст | Нижние титры |
created_at | дата | Заполняется автоматически |
type | title logo cast event | Титры Логотип Эфир События |
logo | yes no fullscreen | включение выключение включение только в полноэкранном режиме |
cast | live archive no | прямой эфир архив выключение |
year | текст | год |
place | текст | место проведения трансляции |
event | текст | информация о событии |
На странице manager (рис. 14) используется сценарий showrecent. php, который вызывается Ajax-запросом и берет из базы последние титры, и размещает на странице, начиная с самого позднего. Если кликнуть по какому-то из титров, то они с помощью действия caption/set занесутся в новую строку таблицы Сaption и отобразятся в окне плеера.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 |
