Как просмотреть фильмы, сериалы в HTML5 видео плеер для Yandex browser. Как сделать собственный видео-плеер на HTML5 Video Добавление субтитров и заголовков
Данные видеоплееры имеют открытый исходный код, а также они могут воспроизводить видео без adobe flash player. В дополнению к этому веб-разработчики могут добавлять свои функции видеоплееру через API jQuery. HTML5 всё больше и больше поддерживается разнообразными браузерами, но точную информацию о том какие браузеры поддерживают данный плеер находится на сайте разработчика..
Я уже писал раньше об одном видеоплеере и как его установить: .
А сейчас рассмотрим другие видеоплееры…
1. Open Standard Media (OSM) Player
На смену adobe flash player, который обеспечивал просмотр видео в хорошем качестве, пришел HTML5 OSM Player
— новый стандарт просмотра видео в интернете.
2. HTML5 Video Org
Одной из важных функций HTML5 является то, что можно вставлять видео прямо через тег .
Используя HTML5 Javascript библиотеку видео будет работать как в новых мобильных устройствах, так и в старых браузерах.
3. OIPlayer jQuery плагин
Работает в Safari, Google Chrome, Firefox, IE. Но на компьютере должно быть установлено Flash или Java.
4. Projekktor видеоплеер
Данный видео плеер имеет также открытый исходный код. Видеоплеер написан на основе Javascript, поэтому поддерживает кроссбраузерность.
5.
Данный плеер на официальном сайте больше не доступен.
Вывод
Это 5 из множества разнообразных плееров на HTML5. Некоторые сайты уже пробуют применять видеоплееры на HTML5, но при этом чтобы в старых браузерах всё выглядело правильно.
Раньше, если вы хотели добавить видео на веб-страницу, вам приходилось использовать элемент
Второй подход заключался в использовании подключаемого модуля браузера, например Silverlight
или Flash
. И хотя технология Flash
позволяла использовать готовый видеоплеер или создавать собственный, но её использование порождало большое нагромождение HTML-разметки, а видеофайлы нужно было кодировать в требуемый формат.
HTML5-видео
— новый стандарт для размещения мультимедийных файлов в сети с оригинальным программным интерфейсом без привлечения подключаемых модулей. С помощью элемента
Рис. 1. Внешний вид видеоплеера в основных браузерах
Как добавить HTML5-видео на веб-страницу
1. Элемент
Поддержка браузерами
IE:
9.0, атрибут muted — с 10.0 Edge:
12.0 Firefox:
3.5 Chrome:
4.0, атрибут muted — с 30.0 Safari:
4.0, атрибут muted — с 5.0 Opera:
11.5 iOS Safari:
3.2 Android Browser:
2.3 Chrome for Android:
44
В простом варианте HTML-разметка для размещения видеофайла на странице имеет следующий вид:
Атрибут controls отвечает за появление элементов управления видеоплеером. Вы можете добавить изображение с помощью атрибута poster , которое браузер будет использовать, пока загружается видео или пока пользователь не нажмет на кнопку воспроизведения, а также задать высоту и ширину видео.
Таблица 1. Атрибуты тега
Атрибут
autoplay
Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы.
controls
Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (воспроизведение, пауза, громкость).
height
Задает высоту окна для отображения видеоданных, возможные значения: px или %
loop
Циклическое воспроизведение видеофайла.
muted
Выключает звук при воспроизведении видеофайла.
poster
URL файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла.
preload
Атрибут, отвечающий за предварительную загрузку видеоконтента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения:
auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение.
metadata — браузер загружает первую небольшую часть видеофайла, чтобы определить его основные характеристики.
none — отсутствие автоматической загрузки видеофайла.
src
Содержит абсолютный или относительный URL-адрес видеофайла.
width
Задает ширину окна для отображения видеоданных, возможные значения: px или %
2. Встраиваемый интерактивный контент
Элемент
3. Видеокодеки
При просмотре видео проигрыватель должен его декодировать. Одни проигрыватели используют программное декодирование видеопотока, другие используют аппаратное декодирование.
Важно!
Поскольку каждый браузер поддерживает определенный кодек, поэтому, чтобы обеспечить воспроизведение видео-контента во всех браузерах, видео-файл нужно размещать в нескольких форматах.
H.264
— высококачественный кодек от фирмы MPEG, делится на профили для поддержки как устройств с минимальными возможностями, так и устройств высокого разрешения.
Ogg Theora
— открытый бесплатный стандарт для видео, качество и производительность несколько ниже стандарта H.264.
VP8
— открытый бесплатный кодек, сходный по качеству с H.264. Поддерживается в Firefox, Chrome и Opera.
4. Видеоконтейнеры
Рис. 2. Видеоконтейнер
Любой видеофайл является файловым контейнером, в котором хранятся другие файлы. Аудио- и видеодорожки объединяются для воспроизведения видеоролика. Метаданные содержат информацию о данном видеоролике — изображение обложки, субтитры и пр. К популярным форматам видеоконтейнеров относятся следующие:
Ogg
(.ogv, .oga, .ogx, .ogg) — формат-контейнер с открытым исходным кодом для видеокодека Theora и аудио Vorbis. Работает в Firefox, Chrome и Opera.
MIME-тип: video/ogg .
MPEG 4
(.mp4) — формат-контейнер для видеокодека H.264 и аудиокодека AAC. Работает в Safari и Chrome. Кодирует видео, в том числе высокой четкости, для полного спектра устройств, таких как iPhone, iPod и iPad.
MIME-тип: video/mp4 .
WebM
(.webm) — формат-контейнер с открытым исходным кодом для видеокодека VP8 от Google и аудиокодека Ogg Vorbis. Работает в Firefox, Chrome, Opera и Adobe Flash Player.
MIME-тип: video/webm .
Audio Video Interleave
(.avi) — формат предназначен для записи звука и движущихся изображений, соответствует спецификации RIFF.
MIME-тип: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo .
Matroska
(.mkv) — популярный видеоконтейнер, может содержать видео в формате H.264, VP8 или Theora.
MIME-тип: video/x-matroska, audio/x-matroska .
На данный момент браузеры поддерживают три основных видео формата:
Формат
Видеокодек
Аудиокодек
.mp4
H.264
AAC
.ogg/.ogv
Theora
Vorbis
.webm
VP8
Vorbis
Видео в формате.avi на сайте средствами HTML5 не воспроизводится
. Поэтому его необходимо перекодировать в эти три формата с соответствующими видео и аудиокодеками для вывода на сайте. Для этого можно использовать видеоконвертеры, указанные на странице ниже.
5. Альтернативные медиа-ресурсы
Элемент
6. Добавление субтитров и заголовков
Элемент
Таблица 4. Атрибуты тега
Атрибут
Описание, принимаемое значение
default
Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент
kind
Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (subtitles). Принимаемые значения:
captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей).
chapters — добавляет названия глав в виде списка для навигации по медиафайлу.
descriptions — добавляет звуковое описание происходящего в видео (для невидящих пользователей).
metadata — метаданные, используемые скриптами, не отображаются для пользователей.
subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео.
label
Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию.
src
Содержит абсолютный или относительный URL-адрес аудио- или видеофайла.
srclang
Язык воспроизводимой дорожки.
7. Пример: размещаем видео на сайте
1.
Декодируем видео в три файла с соответствующими видео и аудиокодеками:
для .mp4
— H.264/AAC,
для .webm
— VP8/Vorbis,
для .ogv
— Theora/Vorbis. 2.
Размещаем код для вставки видео на сайт с помощью HTML5-разметки, используя атрибуты для задания видео требуемых параметров:
4.
Если вы хотите выровнять видеоплеер на странице, нужно обернуть элемент