Player html video: : The Video Embed element — HTML: HyperText Markup Language

Вставка видео на сайт (embed.html)

У сервера Flussonic Media Server есть специальная страница — embed.html, которая предназначена для вставки видео на сайт и просмотра видео через браузер. Технически embed.html — тот же плеер, что используется в административном интерфейсе Flussonic Media Server.

Страница с плеером доступна по ссылке:

http://HOSTNAME/STREAMNAME/embed.html

Страница автоматически определяет браузер и выбирает поддерживаемый видео-протокол. Для большинства устройств на сегодня — HLS (используется плеером по умолчанию).

Caution

Проигрывание видео в браузере может начаться без звука по причине политики, принятой разработчиками браузера. По ссылке объясняется политика и условия, при которых звук включится сам. Политика автопроигрывания на примере Chrome

Вызывается плеер двумя способами:

• При открытии embed.html напрямую (указав ссылку в адресной строке) видео развернется на размер окна браузера и автоматически начнет воспроизведение.

• Также embed.html удобен для вставки видео на сайт как части веб-страницы. HTML-код для вставки доступен на странице Overview в свойствах каждого потока в административном интерфейсе.

Пример:

<iframe allowfullscreen src="http://hostname/streamname/embed.html"></iframe>

Код вставляет на страницу окно с плеером фиксированного размера — 640×480 пикселей. Воспроизведение начинается автоматически.

Дополнительные параметры

Для большинства задач никакой дополнительной настройки не требуется, но embed.html имеет параметры, которые можно задать с помощью URL. Дополнительные параметры задаются в адресной строке:

http://FLUSSONIC-IP/STREAM_NAME/embed.html?autoplay=false&play_duration=600

В этом примере видео будет воспроизводиться без автозапуска, при этои проигрывание прекратится через 10 минут.

Подробное описание всех дополнительных параметров проигрывания можно найти в разделе Query parameters в справочнике Streaming API.

Если у потока есть несколько аудио- и видеодорожек, вы также можете использовать параметр filter.tracks, чтобы указать дорожки, которые хотите воспроизвести, например ?filter.tracks=v2a1 означает видеодорожку v2 и аудиодорожку a1.

Пример доступа к видео из архива

Например, ссылка для доступа к записи телепередачи будет содержать параметры from и to:

http://FLUSSONIC-IP/STREAM_NAME/embed.html?from=1511300552&to=1511300852

Такие ссылки лучше формировать с помощью серверных скриптов на основе программы передач (EPG) для организации CatchUp сервиса.

DVR плеер

Чтобы просмотреть архив записи для потока, откройте DVR плеер при помощи ссылки:

http://FLUSSONIC-IP/STREAM_NAME/embed.html?dvr=true

Плеер позволяет проиграть видео из архива, для больших архивов доступен календарь, а не только временная шкала. Интерфейс плеера позволяет задать масштаб временной шкалы, включить ускоренное воспроизведение и сохранить указанный интервал в виде MP4 файла.

Для DVR плеера доступны все дополнительные параметры адреса, кроме ago.

Интерфейс плеера позволяет автоматически генерировать ссылки формата embed.html?dvr=true&from=1511300552 без использования дополнительных утилит. Просто откройте нужный момент в архиве и нажмите на часы, чтобы открыть ссылку с параметром from.

См. также:

• Обо всех способах проиграть архив можно прочитать в разделе Проигрывание архива

Мультиоконный режим DVR плеера

Note

Сейчас эта функциональность доступна с использованием экспериментального параметра

streams, который возможно, будет изменен. Актуальный список параметров embed.html можно найти в справочнике Streaming API.

В некоторых ситуациях может быть необходимо просмотреть архивы с нескольких видеопотоков в одном плеере с общей временной шкалой. Например, вы можете захотеть синхронно просмотреть записи с нескольких камер наблюдения, чтобы видеть одно и то же помещение с разных точек зрения. В этом случае можно использовать DVR плеер в мультиоконном режиме.

Для этого можно добавить в ссылку для проигрывания DVR параметр streams и перечислить в нем через запятую все необходимые потоки:

http://FLUSSONIC-IP/STREAM_NAME/embed.html?dvr=true&streams=cam01,cam02,cam03,cam04

Note

Вместо STREAM_NAME в этот URL-адрес можно подставить имя любого потока, т.к. для проигрывания будут использоваться потоки, перечисленные в параметре

streams.

В результате все архивы будут проигрываться в отдельных окнах внутри DVR плеера.

Авторизация потоков

Flussonic Media Server имеет встроенные механизмы базовой защиты от вставки плеера на других сайтах. Более подробно про такую защиту вы можете прочесть в разделах Domain lock и CORS для защиты плеера.

Как добавить субтитры и субтитры Добавить субтитры к вашим видео в HTML5 несложно. Давайте разобьем его на 3 простых шага:

Как HTML5 улучшает доступность видео в Интернете

Большинство браузеров переняли основные функции видео, предлагаемые HTML5, как и популярные облачные медиаплееры, такие как Video.js и JW. Игрок. Некоторые браузеры предлагают лучшую доступность видео, чем другие.

Лучше всего то, что видео HTML5 предлагает стандартный формат субтитров, который работает на всех настольных устройствах и во всех браузерах.

Почему добавление субтитров к видео в HTML было таким сложным?

В старых версиях HTML не существовало стандарта отображения видео на веб-странице. Почти все видео показывались через плагины, такие как QuickTime, Silverlight или RealPlayer.

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

Как следствие, публикация субтитров была сложной и ненадежной, поскольку и формат субтитров, и метод кодирования зависят от используемой технологии публикации видео.

Как работает HTML5 Video Captioning

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

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

дорожка Элемент может использоваться для отображения закрытых титров, субтитров, аудиоописаний, маркеров глав или других синхронизированных текстовых данных.

HTML-код ниже показывает, как работают эти элементы:

Атрибуты элемента track работают следующим образом:

src — указывает URL-адрес файла субтитров трек
вид — указывает тип текста, выровненного по времени. Возможные варианты: заголовки, субтитры, главы, описания или метаданные.
srclang — указывает язык
default — указывает, что этот трек включен по умолчанию. Обратите внимание, что несколько элементов дорожки могут использоваться одновременно.

Что такое стандартный формат субтитров для видео HTML5?

В течение нескольких лет два формата субтитров боролись за доминирование в HTML5-видео. Отчасти это связано с тем, что над HTML5 сотрудничают две группы: Рабочая группа по технологиям веб-гипертекстовых приложений (WHATWG) и Консорциум World Wide Web (W3C).

WHATWG разработала и предложила формат субтитров WebVTT (текстовые дорожки веб-видео), который представляет собой новый удобный текстовый формат, состоящий из номеров строк, временных шкал и текста с параметрами форматирования. WebVTT похож на широко распространенный формат SRT, но поддерживает форматирование текста, позиционирование и параметры рендеринга (всплывающее окно, ролик, рисование).

W3C предложил использовать TTML (язык разметки синхронизированного текста), который является широко распространенным форматом XML, поддерживаемым в Adobe Flash и Microsoft Silverlight.

В конце концов W3C решил поддерживать WebVTT. WebVTT теперь является общепринятым стандартным форматом для видео HTML5.

Формат подписи WebVTT

Формат подписи WebVTT представляет собой текстовый файл с расширением .vtt. Файл начинается с заголовка «WEBVTT FILE», за которым следуют реплики и соответствующий им текст.

Существует несколько параметров, позволяющих управлять положением строки, положением текста и выравниванием. Вы также можете добавить стиль к тексту внутри самой реплики. Пример ниже демонстрирует полужирный элемент .

 ВЕБВТТ
1
00:00:13.000 --> 00:00:016.100
  АРНЕ ДУНКАН:  Я начну и
затем перевернуть его к вам.
2
00:00:16.100 --> 00:00:20.100
Это так важно
чтобы родители активно участвовали
 

Документация: — amp.

dev

 

Теперь вы можете использовать этот компонент вне действительных документов AMP, используя версию этого компонента Bento. Узнайте больше в руководстве по бенто.

Описание

Заменяет тег видео HTML5.

Требуемые сценарии

Поддерживаемые макеты

fill фиксированная высота flex-item встроенный nodisplay отзывчивый

примеры

amp-app-banner amp-video Advanced Video Docking Оверлей Click-to-play для amp-video Интеграция видео в AMP Обзор Rich Media Notifications Video Carousels с amp-carousel Видео поворачивается в полноэкранный режим с подсказкой

Использование

Замена тега HTML5 video ; использовать только для прямого встраивания видеофайлов HTML5.

Компонент amp-video

лениво загружает видеоресурс, указанный его атрибутом src , в момент времени, определяемый средой выполнения. Вы можете управлять компонентом amp-video почти так же, как стандартным тегом HTML5 .

Компонент amp-video принимает до четырех уникальных типов узлов HTML в качестве дочерних:

• исходные теги: так же, как в теге HTML , вы можете добавить дочерних тегов, чтобы указать различные исходные медиафайлы для воспроизведения.
• трек тегов для включения субтитров в видео. Если дорожка размещена не в документе, а в другом источнике, необходимо добавить атрибут crossorigin к тегу . Всякий раз, когда видео содержит повествование или важную звуковую информацию, не забудьте включить субтитры/заголовки для пользователей, которые могут не слышать их или отключить звук.
• заполнитель перед началом видео
• резервный вариант, если браузер не поддерживает видео HTML5: один или ноль непосредственных дочерних узлов может иметь атрибут резервного варианта . Если он присутствует, этот узел и его дочерние элементы формируют содержимое, которое отображается, если видео HTML5 не поддерживается в браузере пользователя.

Этот браузер не поддерживает элемент видео.

 <элементы управления усилителем видео
 
 
  макет = "отзывчивый"
  poster="/static/inline-examples/images/kitten-playing.png">
  
  
  <резервный раздел>
    
Этот браузер не поддерживает элемент видео.
  

 <усилитель-видео
 
 
  макет = "отзывчивый"
  src="https://yourhost.com/videos/myvideo.mp4"
  постер = "https://yourhost.com/posters/poster.png"
  произведение искусства = "https://yourhost.com/artworks/artwork.png"
  title="Отличное видео"
  artist="Потрясающий художник"
  альбом="Отличный альбом"
>