Кнопка «Нажать в AirPlay» для тега видео HTML5
Следующее обновление Mac OS под названием El Capitan представит нам новую версию Safari, 9.0.
Список предстоящих изменений невелик, но в нем есть интересный API, на который стоит обратить внимание: API JavaScript для отправки видео в AirPlay.
Давайте посмотрим на пример. Конечно, это работает, только если у вас есть версия для разработчиков El Capitan и Apple TV (или любое другое устройство, поддерживающее AirPlay).
Https://jsfiddle.net/8gd83urs/
Здесь мы используем JS-код от TreeHouse для создания кнопок и добавления к ним одного улучшения. По сути, мы добавили новую кнопку и стили для нее. Давайте подробнее рассмотрим кнопку.
HTML-код:
В нашем примере у нас есть обычный тег video и элемент id = ”play-controls”, содержащий кнопки управления. Наиболее интересными здесь являются атрибут x-webkit-airplay и кнопка id = ”airplay”.
Атрибут x-webkit-airplay был представлен вместе с iOS 5.0. Он может иметь одно из двух значений - разрешить и запретить. Первый позволяет передавать потоковое видео или аудио через AirPlay. Второй отрицает стриминг. Эта функция выглядит немного по-разному для разных версий iOS, но примерно так:
В новом Safari 9 для настольных компьютеров Apple решила расширить функциональность AirPlay. Раньше пользователи могли совместно использовать весь экран через Apple TV, а теперь они могут транслировать только видеоконтент из встроенного проигрывателя HTML. Мы должны поблагодарить разработчиков Apple за создание возможности настраивать дизайн этой кнопки.
Код JavaScript:
Мы пропустили весь JS-код, кроме этого небольшого фрагмента. Понимание того, что там происходит, поможет нам использовать этот новый API в будущем.
window.WebKitPlaybackTargetAvailabilityEvent - это свойство глобального объекта, которое подталкивает доступность (или нет) Airplay в этом браузере. Если присутствует AirPlay, мы можем делиться нашим контентом через Apple TV или другие поддерживаемые устройства. Затем мы скрываем или показываем кнопку совместного доступа в зависимости от этого свойства.
Следующим шагом также является добавление прослушивателя событий для webkitplaybacktargetavailabilitychanged.
Черт возьми, скопируйте все эти имена, потому что в таких длинных словах легко пропустить какую-то букву.
Это событие сообщает нам, изменилась ли доступность целей AirPlay. В нашем слушателе у нас будет аргумент event. Этот аргумент содержит свойство availability. У него может быть одно из двух состояний - доступно или недоступно. Это также условие для видимости нашей кнопки.
Затем мы добавляем к кнопке событие нажатия. Это событие запускает действие webkitShowPlaybackTargetPicker на плеере.
Как видите, запущенное действие показывает нам список доступных устройств. Плохая новость: мы не можем контролировать дизайн этого списка.
Youtube и Vimeo также добавили похожие кнопки в свои плееры:
Михаил Ларчанка, front-end разработчик
