Кодинг попкорна: Учимся создавать плагины для медиаплееров PopcornTV

Иметь отдельный девайс для проигрывания HD-видео — отличная идея. Во-первых, отпадает всякая необходимость размещать компьютер рядом с телевизором и включать его каждый раз, как захочется посмотреть новый фильм. А во-вторых, современные HD-плееры являются весьма функциональными устройствами и способны здорово облегчить жизнь.

Например, практически любой полноценный HD-плеер либо по умолчанию, либо после установки кастомной прошивки способен качать торренты, работать с сетевыми ресурсами, показывать видео с Youtube и т.д. У плееров PopcornTV есть дополнительная крутая возможность, которую оценит любой Х-человек — под него можно самостоятельно писать плагины и даже свободно размещать их в общедоступном репозитории «МедиаБар». Кстати, сейчас компания BBK проводит конкурс: каждый автор достойного приложения получит в подарок телевизор BBK. Так что у тебя есть хороший шанс не только потренироваться в кодинге, но и выиграть cебе новый телек.

Главные тезисы

Самое главное, что нужно осознать — это то, что по своей сути «плагин» является обычным web-сайтом, адаптированным под экран телевизора. На медиаплеере Popcorn установлен специальный Linux на борту и вся визуализация «плагинов» осуществляется с помощью встроенного браузера Syabas myiBox Browser, который умеет отображать HTML-контент и даже обеспечивает базовую (неполную) поддержку CSS и JavaScript. Считать его полноценным браузером нельзя: когда я попытался зайти с его помощью на Яндекс, девайс ушел в нокдаун, и мне помог только ребут. Собственно, он и не для серфинга: Syabas Browser предназначен для отображения специально созданных под него страничек, которые и располагаются в МедиаБаре. Сайты-плагины могут разрабатываться с использованием любой технологии, будь то PHP, ASP .NET, Python, Ruby или JSP. Единственное ограничение — клиентская разметка: браузер даже использует собственное расширение HTML, дополняющее стандартные теги новыми свойствами.

Самый простой вариант создания «плагина» для PopcornTV выглядит так: создается HTML-файл со ссылками на медиа-источники в интернете, файл записывается на флешку, флешка втыкается в «Попкорн», после чего «плагин» становится доступным с пульта управления, и ты можешь его запустить, получив возможность переходить по созданным ссылкам. Например, если ты задумал сделать приложение для прослушивания live-вещания радиостанций, код будет примерно таким:

<a href="http://w01-cn01.akadostream.ru:8000/ silverrain48.mp3" aod>Серебряный Дождь</a><br> <a href="http://broadcast02.station.ru/dfm" aod>DFM</a>

Тег «aod» тут указывает на то, что это аудио-источник: aod = Audio On Demand (аудио по запросу). В случае, если ты указываешь на видео- или фото-альбом, этот тег должен быть «vod» или «pod» соответственно.

Путь в репозиторий

Для разработки приложений, которые хочется разместить в МедиаБаре, путь несколько отличается: по сути, тебе нужно сделать сайт, который будет генерировать понятную браузеру «Попкорна» HTML-разметку. Используемая технология может быть любой: начиная со статичных HTML-файлов и заканчивая любым популярным web-фреймворком. МедиаБар работает на базе технологии Apache Tomcat — JAVA-based веб-сервера, служащего для работы с JSP-приложениями.

Для разработки плагинов по этой технологии есть специальный SDK, который включает в себя работающий пример «Медиапортала» с несколькими плагинами и документацию разработчика.

Для экспериментов по созданию новых плагинов первым делом необходимо установить на свой компьютер Apache Tomcat, предварительно убедившись в наличии Java-машины. Все требуемые файлы присутствуют на нашем DVD, а установка достаточно проста: tomcat поставляется в виде zip-архива, который надо просто распаковать, после чего запустить с помощью специального скрипта startup.bat в винде либо startup.sh в *nix. В Windows может потребоваться установить переменные окружения JRE_HOME и JAVA_HOME так, чтобы они указывали на путь до Java. После запуска Tomcat откроет 8080 порт (по умолчанию), на котором будет висеть веб-сервер.

В составе SDK есть работающий пример медиапортала с несколькими плагинами. Чтобы запустить его, достаточно перенести папку ROOT из архива с SDK в папку tomcat\webapps, переименовав уже имеющийся там каталог ROOT. После этого, обратившись браузером по адресу http://localhost:8080, ты увидишь тестовое приложение из SDK, которое можно менять и добавлять в него новые плагины. Этим мы сейчас и займемся.

Собственный плагин

Разработка собственного плагина начинается с создания новой папки внутри каталога service. Затем нужно создать файловую структуру плагина, состоящую из следующих директорий:

image image-1280x720 page page-1280x720 thumb xml

Все папки имеют говорящие названия и, думаю, понятно, что в них лежит: в images — картинки проекта, в page — верстка, стили и само приложение, в thumb — иконки плагина, в xml — данные.

Обрати внимание, что верстка и графика представлены в двух вариантах под разные разрешения; это необходимо для поддержки различных телевизоров.

В качестве примера давай сделаем простое приложение, которое будет показывать наши хакерские видео-уроки. Приложение будет подгружать информацию об уроках из XMLфайла, формировать «меню» для выбора ролика и давать ссылку на воспроизведение урока. Первым делом зафиксируем формат, в котором будем хранить и передавать информацию о доступных уроках:

<?xml version="1.0" encoding="UTF-8" ?> <video> <item id="1" title="Живой ROP"/> <item id="2" title="Извлекаем конфиг из TDL3"/></video>

Этот файл можно сохранить под именем video. xml в папке xml, а можно хранить на удаленном сервере — никакой разницы. Идем дальше. Основной файл плагина — index.jsp, он будет входной точкой приложения. JSP-файлы представляют собой нечто очень похожее на любой шаблонный файл: смесь HTML и управляющих тегов. Если ты когда-нибудь создавал шаблоны для любой системы типа Fast Template или Smarty, то ты быстро разберешься — тут все очень похоже.

Приведу и прокомментирую сокращенный пример index.jsp нашего приложения:

<c:catch var="error"> <c:import var="xml" charEncoding="utf-8" url= "http://dvd.xakep.ru/video.xml"/> <x:parse var="video" doc="${xml}"/> <x:set var="videos" select="$video//item"/> </c:catch> <c:set var="i" value="1"/> <x:forEach select="$videos" varStatus="s"> <td> <x:set var="id" select="string(@id)"/> <c:set var="url" value="http://dvd. xakep.ru/videocast/${id}.mp4"/> <x:set var="title" select="string(@title)"/> <a href="${url}" vod> <img src="http://dvd.xakep.ru/ images/${id}.jpg" border="0"> </a> <br /> <h2>${title}</h2> </td> <c:if test="${i %4 == 0}"> </tr><tr> </c:if> <c:set var="i" value="${i+1}"/> </x:forEach>

Как видишь, весь «код» тут представлен в виде тегов: смешаны и знакомые тебе HTML-теги, и какие-то новые, непонятные. Эти «непонятные» входят в библиотеку тегов JSTL и отлично описаны на любом сайте по Яве.

Кратко пройдемся по коду и используемым JSTL-тегам:

<c:catch> обрабатывает исключения.
<c:import> считывает данные файла в переменную «xml» — обрати внимание на указание правильной кодировки и на то, что файл может легко быть размещен на удаленном сервере.
<x:parce> парсит XML-данные.
<x:set> получает выборку данных и помещает ее в массив данных videos.
<x:forEach> — цикл по XML-данным.
<c:if> — обычное условие.

Смысл кода очень и очень простой: считывается XML-файл, выбираются все записи «item» из «video», и в цикле по ним выводятся обложка ролика, название ролика и ссылка на проигрывание ролика. Причем через каждые 4 записи вставляются теги </tr><tr> для перехода на новую строку таблицы. Для того, чтобы твой плагин стал доступным с главной страницы нашего тестовго медипортала в локальном Tomcat, нужно добавить соответствующую запись в файл portal.xml:

<service name="Xakep" id="xakep" desc="Hacker’s video"/>

Результаты

В результате наших манипуляций мы получили приложение, считывающее данные о доступных роликах из XML-файла (возможно, удаленного), наглядно отображающее эти данные и предоставляющее возможность проигрывания этих видео. В приведенном коде была опущена вся разметка и заголовки JSP-файла, полная версия приложения доступна на DVD.

Содержание