Триколор 

Проигрыватель в html5 от youtube обновить. Пример реализации видео плеера. Как добавить 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. Встраиваемый интерактивный контент

Элемент определяет контейнер для внешнего приложения или интерактивного содержимого (другими словами, плагина). Большинство браузеров поддерживало данный элемент на протяжении долгого времени. Тем не менее, данный тег не был включен в спецификацию HTML4, его добавили в спецификацию HTML5. С помощью на веб-страницы можно добавлять не только видеофайлы, но и векторные изображения в формате swf:

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 не воспроизводится . Поэтому его необходимо перекодировать в эти три формата с соответствующими видео и аудиокодеками для вывода на сайте. Для этого можно использовать видеоконвертеры, указанные на странице ниже.

Чтобы убедиться, что браузер умеет обрабатывать видеофайлы, нужно создать файл.htaccess в папке, где находится веб-страница, определяющая MIME-типы для видео:

AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm

Несмотря на то, что HTML5-видео поддерживается современными браузерами, тем не менее для Internet Explorer (9+) и Safari требуются установленные плагины Microsoft Media Player и Apple QuickTime соответственно.

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. Добавляем поддержку MIME-типов в файл.htaccess .
3. Размещаем код для вставки видео на сайт с помощью HTML5-разметки, используя атрибуты для задания видео требуемых параметров:

4. Если вы хотите выровнять видеоплеер на странице, нужно обернуть элемент

с присвоенным классом, для которого задаются ширина и высота, соответствующие размерам вашего видео. Далее, с помощью css-свойств можно задать отступы, выравнивание на странице и т.д.

8. Видеоконвертеры

— позволяет конвертировать видео и аудио в необходимый вам формат. Сохраняет медиафайлы для проигрывания на мобильных устройствах. «Умные» готовые профили позволяют добиваться максимального качества.


ONLINE-CONVERT — бесплатный онлайн-конвертер, позволяющий конвертировать любые медиа-файлы из одного формата в другой.


— модуль расширения для Firefox, может создавать видеофайлы Theora и WebM . Работает непосредственно в браузере, но вся работа выполняется локально без обращения к веб-серверу.

В последнее время мы уже не представляем свою жизнь без мобильных устройств. И всем нам хочется максимальной многозадачности и быстрой работы девайса. Но проблема воспроизведения видео и аудио на мобильных устройствах без использования Flash и Silverlight остро назревала уже давно. Поэтому на смену этим стандартам постепенно стал приходить новый - HTML5 плеер для аудио и видео. Эффектривность воспроизведения видео HTML5 связана с нативной поддержкой медиа (чтобы воспроизвести медиафайл наиболее эффективно, нужно воспроизводить его нативно, то есть должна производиться максимальная интеграция между браузером и операционной системой, а последней - с железом).

Перейдем теперь к практической части и разберемся, как добавить видео на сайт HTML.

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

Для добавления видео на веб-страницу с помощью HTML используется тег video . Применяется он следующим образом:

Примерно так будет выглядеть видео-плеер (в каждом браузере свой стиль):

Но стоит учесть, что:

  1. Не все браузеры поддерживают тег video ;
  2. Не каждый браузер поддерживает используемый видео кодек.

Если с первым пунктом проблем значительно меньше (большинство современных браузеров, всё-таки, корректно работают с указанным тегом), то на второй пункт стоит обратить пристальное внимание. Поговорим об этом вопросе несколько подробнее.

Поддержка видео кодеков HTML5 в различных браузерах

Для полноты информации стоит привести следующую таблицу:

Браузер Google Chrome Mozilla Firefox Safari Opera Internet Explorer
WebM Есть Есть Нет Есть Нет
H.264 Есть Нет Есть Нет Есть
ogg/theora Есть Есть Нет Есть Нет

Как вы видите, нет универсального формата, который позволил бы воспроизводить видео во всех браузерах. Данная ситуация решается следующим способом: на сервер загружается видеофайл в нескольких форматах, а затем в теге video указываются несколько кодеков. Выглядит это примерно так:

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

Атрибуты тега VIDEO

К атрибутам тега video следует отнести:

  • src - путь к видеофайлу;
  • autoplay - принудительное воспроизведение видео по окончании загрузки страницы;
  • controls - отображается панель управления видео (play, pause, volume и т.д.);
  • width/height - устанавливает ширину/высоту видеоплеера;
  • loop - указывает на повторение видео после завершения (циклическое воспроизведение);
  • poster - определяет адрес изображения, которое будет выводиться пока видео не проигрывается или недоступно;

Примечание: наиболее простой способ добавить видео на сайт - использовать сервис YouTube. В конструкторе сайтов "Нубекс" есть подробная статья о добавлении видео из YouTube:

ХТМЛ – это язык разметки веб-страниц, по сути он отвечает за правильное отображение всех элементов на странице. Постепенно выпускаются новые спецификации языка, последней является пятая версия, которая принесла упразднение старых и внедрение новых тегов и функций. C HTML5 Yandex браузер стал поддерживать проигрывание видео через собственный Video Player, который не требует установку других плагинов, вроде Adobe Flash Player. Встроенный функционал языка позволяет воспроизвести любой фильм на сайте, поддерживающий HTML5.

При отсутствии HTML5 для браузера Яндекс для воспроизведения видео и части музыки приходилось пользоваться Flash Player. Получалась ситуация, при которой стандартными средствами браузера невозможно было прослушать музыку. Наибольший приток пользователей к Flash был спровоцирован появлением крупнейшего видеохостинга YouTube. Со временем другие крупные компании, например, Apple, стали использовать его для обработки видео.

Прирост пользователей продолжался долгое время, сразу после выхода HTML 4.01 наблюдался большой скачок популярности. Отток произошёл лишь после выпуска новой спецификации HTML5, которая впервые появилась в 2012 году, но полноценный запуск произошёл в 2014 году.

К переходу на HTML5 видео проигрыватель подталкивает несколько основных недостатков плагина от Adobe:

  • Необходимость дополнительно устанавливать в систему. Со временем его добавили в Google Chrome по умолчанию;
  • Низкая скорость работы и частые перебои в загрузке;
  • Плохая стабильность работы, нередко появлялись сбои, конфликты, часто приходилось перезагружать страницу.

Преимущества HTML5 в сравнении с Adobe Flash Player

Технологии по своей сути отличаются, но предназначаются для одних и тех же задач. Для пользователей и разработчиков новый стандарт ХТМЛ5 принёс массу преимуществ:

  • Открытый код. Программист самостоятельно может доработать код. Полезно для повышения безопасности бизнес-ресурсов и приложений;
  • Быстрое развитие. Разработкой занимается продвинутая компания W3C, которая черпает хорошие идеи у пользователей, дорабатывающих стандарт;
  • Совместимость с большинством платформ. Flash Player не поддерживается на Android до 2.01 и 4.1х и более новые варианты, также плагин несовместим с iPhone и iPod. Для работы нового проигрывателя требуется иметь относительно новую версию Yandex browser;
  • Энергоэффективная технология. Видео плеер HTML5 потребляет значительно меньше ресурсов процессора, соответственно, экономит заряд, что важно для любого мобильного телефона.

Что такое HTML5 Video Player для браузера Яндекс?

HTML5 Video Player является программой, предназначенной для конвертирования видеофайлов в формате HTML5. Дополнительно через приложение можно смотреть видео, но такой необходимости не возникает с современными возможностями Яндекс обозревателя. В программу можно загрузить любой файл распространённых видео форматов: mp4, AVI, MKV.

После обработки файла он будет пригоден для загрузки на сервер, функция публикации уже встроена в программу. До заливки на сервер видео можно просмотреть в браузере. Загрузить программу лучше с официального сайта .

Некоторые пользователи жалуются, что приложение не работает, закрываясь сразу после загрузки в неё файла. Устранить проблему помогает переустановка или отключение антивируса. Чтобы не заниматься поиском причин неисправности, лучше воспользоваться аналогичной программой — Free HTML5 Video Player.

Процесс использования обеих приложений аналогичен:


Чтобы вставить ролик на сайт, достаточно скопировать JavaScript код со страницы в браузере, которая открылась после конвертации, и вставить в блок для видео на веб-ресурсе.

Как посмотреть HTML5 Video в Яндекс браузере

На самом деле никаких особых методик для просмотра видео в интернет формате HTML5 не потребуется. Чтобы начать просмотр, достаточно перейти на видео и браузер всё сделает самостоятельно. Воспроизвести видео на YouTube и многих других сервисах не составляет труда, сегодня этот видеохостинг работает исключительно с форматом ХТМЛ5, только для устаревших обозревателей происходит автоматическое переключение на старый Flash Player.

Иногда не получается просмотреть видео в формате HTML5 при наличии ошибок. Технология относится к относительно стабильным способам просмотра визуального контента и звука, но периодические провоцирует ошибки:


Иногда помогает обновление Яндекс обозревателя:


Для рядового пользователя просмотреть видео в HTML не составляет сложности, но важно наличие поддержки формата со стороны сервиса. Известная социальная сеть Facebook не работает с HTML5, но есть способ открыть эту возможность посредством расширения HTML5 Video Player, его можно скачать по ссылке .

ХТМЛ 5 – это общедоступный формат, который поддерживается всеми современными браузерами, его не нужно отдельно устанавливать. С помощью программы HTML5 Video Player для Яндекс браузера можно посмотреть, загрузить видео и преобразовать различные форматы в ХТМЛ5, сделав их доступными для онлайн просмотра.

Главным преимуществом видеозаписей в формате HTML-5 является возможность воспроизведения их в браузере даже без плагина Adobe Flash Player. Замечательным инструментом для конвертирования видеофайлов в этот формат является утилита Фри ХТМЛ5 Видео Плеер энд Конвертер. Вы можете наполнить свой сайт мультимедийным контентом, полезными видеороликами и не бояться несовместимости с браузерами посетителей. Для этого вам достаточно скачать бесплатно новую версию Free HTML5 Video Player and Converter и установить ее на компьютер.

Возможности:

  • качественное конвертирование видеозаписей;
  • выключение компьютера после завершения преобразования файлов;
  • пакетное конвертирование видеозаписей;
  • выбор директории для сохранения записей;
  • встроенный редактор пресетов для более точной настройки качества видеофайлов;
  • настройка выходного имени файлов;
  • воспроизведение готовых файлов во встроенном проигрывателе

Принцип работы:

теперь ознакомимся с этой программой более детально. В первую очередь, следует отметить наличие русскоязычного меню, которое значительно облегчит использование Фри ХТМЛ5 Видео Плеер энд Конвертер. Его основная функция заключается в преобразовании видеофайлов в HTML-5-формат для корректного воспроизведения на сайтах и блогах. Можно выбирать нужное разрешение видеозаписи, детально настраивать пресеты и сохранять готовые записи в нужную вам директорию.
Установить Free HTML5 Video Player and Converter вы можете для Windows XP, Vista, 7 и 8.

Плюсы:

  • поддержка многих видеоформатов;
  • преобразованное видео совместимо со всеми современными браузерами;
  • возможность скачать бесплатно Free HTML5 Video Player and Converter на компьютер;
  • меню на русском языке;
  • простой интерфейс.

Минусы:

  • конвертирование только в оптимизированный формат для Интернет-сайтов.

Представленная программа идеально подойдет для владельцев сайтов и блогов. Благодаря оптимизации видео ваши Интернет-проекты будут отображаться корректно даже при отсутствии Adobe Flash Player в браузерах посетителей. Для этого мы рекомендуем вам скачать бесплатно последнюю версию Фри ХТМЛ5 Видео Плеер энд Конвертер. Однако, если вы не являетесь web-мастером, эта программа может быть для вас малополезной. Во всяком случае, программу стоит скачать и попробовать на своей рабочей системе.

Данные видеоплееры имеют открытый исходный код, а также они могут воспроизводить видео без 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, но при этом чтобы в старых браузерах всё выглядело правильно.