Есть несколько способов добавить медиафайлы на веб-страницу. Ранее вы узнали, как использовать стандартный тег <video> . В этой статье вы узнаете о некоторых доступных медиа-фреймворках (или библиотеках), которые можно использовать для расширения или замены поведения видеоплеера HTML5 по умолчанию.
Медиа-фреймворки бывают как проприетарные, так и с открытым исходным кодом, и в их основе лежит набор API-интерфейсов, которые поддерживают воспроизведение аудио и/или видео для различных форматов контейнеров и протоколов передачи. Хороший фреймворк имеет модульную архитектуру и предоставляет четкую и подробную документацию. В идеале его также должно быть относительно легко настроить и использовать. Вы можете спросить себя: «Если видеоплеер HTML5 уже предоставляет большинство функций, то зачем мне использовать фреймворк или библиотеку?» Это отличный вопрос, давайте покопаемся.
Преимущества использования фреймворка
В большинстве ситуаций, которые выходят за рамки потребностей базовой веб-страницы, вам понадобится использовать медиа-фреймворк для обслуживания вашего контента. Если вы не готовы разрабатывать и поддерживать богатый набор функций, таких как автономное воспроизведение, потоковая передача, аналитика, «картинка в картинке», миниатюры предварительного просмотра, встраивание и монетизация, такие как оптимизация заполняемости, планирование рекламы или назначение ставок в заголовке, и это лишь некоторые из них, тогда вам, вероятно, следует перенести эту сложность на существующее решение.
Именно здесь на помощь приходят медиа-фреймворки. Они предоставляют вам набор функций и условий, в которых вы можете использовать эти функции, а затем вам нужно решить, какой фреймворк подходит для вашего проекта. В следующей статье мы обсудим, как мы создали PWA с автономной потоковой передачей , реализующей несколько сложных функций. Внимание, спойлер: это была большая работа, и решение все еще далеко от готового к производству решения. Избавьте себя от головной боли и используйте фреймворк.
Существует множество вариантов на выбор, сейчас в этой статье основное внимание будет уделено трем: Shaka Player , JW Player и Video.js .
Шака Игрок
Согласно документации, Shaka Player от Google — это библиотека JavaScript с открытым исходным кодом для адаптивного мультимедиа. Он воспроизводит адаптивные медиаформаты (такие как DASH и HLS ) в браузере без использования плагинов. Вместо этого Shaka Player использует открытые веб-стандарты MediaSource Extensions и Encrypted Media Extensions .
Shaka Player также поддерживает автономное хранение и воспроизведение мультимедиа с помощью IndexedDB . Контент можно хранить в любом браузере. Хранение лицензий зависит от поддержки браузера.
На сайте документации Shaka Player есть инструкции по базовому использованию . Однако, в двух словах, чтобы использовать Shaka Player, вам сначала необходимо создать HTML-страницу с видео или аудио элементом. Затем в JavaScript вашего приложения вы устанавливаете полифилы и проверяете поддержку браузера. Как только браузер подтвердит поддержку Shaka Player, сценарий создаст объект Player для переноса медиа-элемента, прослушивает ошибки и затем загружает файл манифеста. Шака Плейер возьмет на себя управление.
С Shaka вам придется самостоятельно размещать и кодировать медиафайлы. Создание медиасервера не является слишком сложным, однако кодирование/транскодирование мультимедиа может быть трудоемким и сложным. Вероятно, вы захотите перенести эту часть на такой сервис, как Zencoder , Amazon Elastic Encoder или Google Transcoder API , чтобы автоматизировать повторяющиеся задачи и ускорить процесс.
Самое замечательное в Shaka Player то, что есть действительно фантастический инструмент и SDK для упаковки мультимедиа для упаковки и шифрования DASH и HLS, который называется Shaka Packager. Он может подготовить и упаковать медиаконтент для потоковой передачи в Интернете, о чем вы узнали ранее в разделах «Преобразование мультимедиа» и «Шифрование мультимедиа» .
JW-плеер
Если вы ищете вариант, предоставляющий услуги хостинга и кодирования/транскодирования, вы можете рассмотреть JW Player , но имейте в виду, что JW Player является проприетарным программным обеспечением. Это означает, что у вас нет особого контроля над платформой или дорожной картой. Существует базовая бесплатная версия, в которой видео отображается с водяным знаком, и коммерческая версия.
JW Player поддерживает потоковую передачу в формате MPEG-DASH (только платная версия), управление цифровыми правами (DRM) (с Vualto), интерактивную рекламу, настройку интерфейса и встраивание. Существует хорошо документированный API и SDK. Однако, если вы просто ищете быстрый и бесплатный способ размещения своих медиафайлов, то встраивание видео YouTube, как правило, будет вашим лучшим бесплатным вариантом.
Видео.js
Согласно их веб-сайту, Video.js создан с нуля для мира HTML5. Он поддерживает видео HTML5 и современные форматы потоковой передачи, такие как DASH и HLS, а также YouTube и Vimeo. Он поддерживает воспроизведение видео на настольных и мобильных устройствах и везде хорошо смотрится со скинами на основе CSS.
Есть несколько способов использовать Video.js, но самый простой — использовать бесплатную версию CDN, предоставляемую Fastly . Подробнее о том, как настроить плеер, можно узнать на странице начала работы . Video.js — очень мощный видеоплеер, и, как и Shaka Player, вам также потребуется размещать и кодировать видео. Однако одно отличие заключается в системе плагинов, с помощью которой вы можете делать такие вещи, как воспроизведение видео YouTube в проигрывателе Video.js, который также можно настроить.
Другие рамки
Доступно множество различных фреймворков и библиотек, эта статья лишь поверхностно описывает то, что есть. При выборе платформы вам следует учитывать, какие функции вам нужны для проекта и как вы планируете размещать, кодировать или перекодировать ваши медиафайлы. Вам нужна реклама перед роликом или другие стратегии монетизации? Будут ли ваши медиа доступны в автономном режиме? Насколько велик или мал ваш бюджет? Или любое другое количество соображений. Проведите исследование и спросите предложения у людей в вашей сети. Существуют десятки других отличных вариантов, и прежде чем сделать какой-либо выбор, потратьте некоторое время, чтобы выбрать тот, который подойдет вашей команде, и избегайте ненужной технической задолженности или сложности, которую необходимо поддерживать в течение жизненного цикла проекта.
Далее вы узнаете о PWA с автономной потоковой передачей, которую мы создали, чтобы продемонстрировать, как подойти и решить основные проблемы, возникающие при развертывании собственного решения, используя только видеообъект HTML5 без платформы для выполнения тяжелой работы.