Всем приветы!

По роду занятий я являюсь разработчиком приложений для Smart TV. Особенность их в том, что реализация плеера на каждой платформе отличается от любой другой. Поэтому было решено реализовать общую оболочку плеера, которую можно было бы с минимумом изменений импортировать на любую ТВ-платформу. За основу был выбран HTML 5, поскольку он поддерживается почти на всех ТВ-платформах.

Выношу на суд общественности свои скромные потуги по реализации плеера на HTML 5, потыкать который можно здесь. Ввиду особенной разновидности лени не стал выносить на страницу все состояния и события, а заменил их текстовым выводом в консоль.

Что есть в примере?

В примере представлен класс для работы с плеером, реализованы функции установки видео на проигрывание, паузы, перемотки, остановки. Кроме этого, в примере имеется вставка «рекламного ролика», поскольку с этим пришлось очень много работать в свое время. Ссылки на видео заколочены жестко. В связке с Azure можно получить хороший сервис для проигрывания видео в веб-приложениях и на мобильных устройствах, но об этом в другой раз. А сейчас про плагин.

Суть идеи заключалась в том, что бы написать оболочку с вынесенными методами и обработчиками событий, которая бы позволяла менять используемую платформу без изменения методов и событий.

Задача была успешно реализована в виде плагина.

Структура плагина:

• базовый класс PlayerClass. В конструктор подается идентификатор объекта, в котором проигрывается видео. В данном случае, идентификатор html объекта video;
• вынесенные функции-обработчики событий плеера. Они сгруппированы в функции initPlayerEventListeners.

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

Рассмотрим объект подробнее. Он содержит методы: change, set, start. Метод change меняет основное видео на вставку и запоминает позицию, на которой приостановилось воспроизведение основного видео. Метод set вставляет основное видео обратно в плагин и запускает его на проигрывание. Метод start так же запускает основное видео на проигрывание и дополнительно перескакивает на ранее запомненную позицию.

Особенность реализации заключается в том, что эти методы должны вызываться в различное время и в разных событиях. Если смена видео происходит в событии обновления времени, то обратная смена происходит в событии окончания видео. Замечу, что перематывать видео можно только тогда, когда оно проигрывается. Если вставить в объект ссылку и сразу попытаться перемотать, то плагин бросит ошибку, поскольку необходимо некоторое время, чтобы видео подгрузилось и начало проигрываться. Ввиду этого метод по перемотке видео запускается в событии окончания загрузки видео.

В свое время подобная реализация сэкономила нам кучу времени и нервов. Буду признателен за каменты.

P.S. Ну и конечно же, код можно найти в нашем репозитории!