Одна из вещей, которые мне нравятся в Prime Video, — это возможность узнавать больше о том, что я смотрю, не покидая проигрыватель. Эта функция вдохновила меня использовать Mux Robots, чтобы помочь разработчикам перенести этот опыт в приложения для потокового видео на устройствах Apple TV и Google TV.
Функция X-Ray в Prime Video.
Несколько месяцев назад я выпустил Mux React Native Player для iOS и андроид с функциями Mux Robots, встроенными в интерфейс просмотра. Мне хотелось придать плееру свежий вид и улучшить взаимодействие как на мобильных устройствах, так и на телевизорах, поэтому я объединил усилия с Джорданом из нашей команды дизайн-бренда, чтобы сделать редизайн.
Создано для пульта
React Native позволяет мне использовать один и тот же код TypeScript для мобильных устройств и ТВ, но способы взаимодействия зрителей с каждым экраном различаются. На телефоне вы можете нажать на то, что вам нужно. На телевизоре вам нужно дотянуться до всего с помощью пульта и понимать, какой элемент управления выбран.
Чтобы разобраться с этим, мы с Джорданом протестировали плеер на одном из больших экранов в нашем подвале, внося изменения и наблюдая за тем, как они выглядят и работают. Как выразился Джордан: «возможность вносить правки в режиме реального времени стала прекрасной возможностью для совместной работы».
Возьмем, к примеру, главы. Зритель использует кнопки направления на пульте, чтобы перейти к кнопке «Главы» и открыть список разделов в видео. Выбор главы переносит к этой точке, закрывает список и возвращает выбор на кнопку «Главы». Это дает зрителям быстрый доступ к интересующей их части без необходимости перематывать видео взад и вперед с помощью пульта. Нажатие кнопки «Назад/Меню» закрывает список, если нужно просто вернуться к плееру.
Я также добавил функцию, которая позволяет зрителям просматривать диалог и выбирать реплику, чтобы перейти к этому моменту. Меню «…» в плеере также позволяет им выбирать, какие функции Mux Robots отображать, сохраняя элементы управления сосредоточенными на том, чем они пользуются.
Подключение Mux Robots к плееру
Mux Robots предоставляет зрителям больше способов исследования видео, не покидая плеер. Каждый рабочий процесс служит своей цели:
- Сводки дают зрителям быстрый обзор того, о чем говорится в видео.
- Главы разбивают видео на разделы, чтобы зрители могли сразу перейти к интересующей их теме.
- Ключевые моменты предлагают быстрые переходы к основным моментам или конкретным эпизодам, которые зрители хотят пересмотреть.
- Переведенный звук и субтитры позволяют зрителям следить за происходящим на предпочитаемом ими языке, используя меню дорожек плеера после того, как эти дорожки станут доступны.
Чтобы добавить сводки, главы и ключевые моменты в ваше приложение, вы можете подключить результаты к плееру двумя способами:
Подготовка результатов заранее
Запустите рабочие процессы Robots после загрузки и передайте подготовленные данные через проп плеера robots. Для глав установите значение update_asset_chapters в true, чтобы записать их напрямую в актив Mux в виде дорожки глав — вам не нужно хранить отдельную копию в базе данных или CMS, хотя вы можете это сделать, если захотите. Например, сохранение собственной копии может помочь вам редактировать, упорядочивать или повторно использовать результаты в вашем приложении. Другие выходные данные, такие как сводки и ключевые моменты, доступны через задание Robots; сохраните эти результаты, если они вам понадобятся после 30-дневного периода хранения заданий. Зритель может открывать панели с подготовленными данными без запуска нового запроса на генерацию Robots.
Запрос результатов по мере необходимости
Предоставьте обратные вызовы, такие как onGenerateChapters, чтобы подключить плеер к вашему бэкенду, когда зрители запрашивают функцию. Ваш бэкенд может вернуть существующие результаты или запустить новое задание Robots, используя идентификатор актива видео. Если он запускает новое задание, обработайте его завершение с помощью вебхука или опроса, прежде чем возвращать подготовленные результаты в плеер.
Вы контролируете как то, что генерирует Mux Robots, так и то, что отображает плеер. На вашем бэкенде параметры рабочего процесса могут определять детализацию глав или выбирать языки перевода. В плеере используйте проп robots с controls="custom", чтобы выбрать, какие функции предлагать — например, главы без кнопки сводки.
Попробуйте в своем приложении
Чтобы опробовать плеер в приложении React Native/Expo, установите npm-пакет, добавьте плагин конфигурации и соберите нативный клиент разработки, используя руководство по началу работы.
ПРИМЕЧАНИЕ:
Go не может загрузить нативный плеер. Для Apple TV или Google TV следуйте отдельной инструкции по настройке примера для ТВ, в которой используется react-native-tvos.
После завершения настройки вот минимальный пример с использованием глав. Замените ID воспроизведения и примеры глав на ID воспроизведения вашего видео и сохраненные результаты Robots:
Пропсы
Эти главы предоставляются напрямую, поэтому открытие панели не делает никаких запросов к API Robots. Чтобы сгенерировать главы для вашего собственного видео, актив должен иметь готовую дорожку субтитров. Сгенерируйте результаты на своем бэкенде и сопоставьте каждое значение start_time из API с полем плеера startTime.
Что мне понравилось в Prime Video, так это возможность узнавать больше о видео, не покидая плеер. С Mux React Native Player разработчики могут перенести подобный опыт в свои собственные мобильные и телевизионные приложения: позволить зрителям читать сводку, переходить к главе или находить реплику в транскрипции. Вы сами выбираете, какие функции предложить и как связать их с вашими видео, предоставляя зрителям больше способов изучать то, что они смотрят.
Впереди также ждет работа над плеером React Native. Команда Video.js работает над поддержкой React Native, и пока эта работа продолжается, Mux React Native Player предоставляет разработчикам возможность создавать и тестировать такие возможности Robots на мобильных устройствах и телевизорах уже сегодня.
Изучите или передайте его своему агенту по кодированию и посмотрите, что он сможет создать с помощью Mux React Native Player.
Оставьте кошелек там, где он есть
Кредитная карта для начала работы не требуется.
