От теории к делу

Ладно, переходим к практике. Как вставить видео на сайт? Как я уже говорил, для этого нужно использовать парный тег video. Напомню вам, что перед использованием html5 элементов полезно делать следующее:

1. Указать правильный доктайп:

2. Указать тип новых элементов как блочный: Video (и другие новые теги)

Теперь мы сделали достаточно, чтобы нормальные браузеры нормально отобразили эти элементы.

Собственно, если говорить о вставке медиафайлов, то нужно как-то указать браузеру путь к самому файлу. Это мы сделаем, но проблема в том, что разные браузеры поддерживают разные форматы и то, что работают в одном, не работает в другом.

Например, Chrome (самый крутой браузер) поддерживает все форматы (ogg, mp4, webm), а IE только mp4. Так вот, если вы хотите кроссбраузерности, то придется указывать несколько форматов, то есть для начала нам нужно наше видео сконвертировать в 3 формата, потом забросить на сервер, и только после этого вставлять. Как? С помощью тегов source:

<video> <source src = «video.mp4» type = ‘video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘> <source src = «video.ogg» type = ‘video/ogg; codecs=»theora, vorbis»‘> <source src=»video.webm» type=’video/webm; codecs=»vp8, vorbis»‘> </video>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В общем, вот такой достаточно привычный синтаксис, но все же в нем есть кое-что новое. Например, в атрибуте type сначала нужно указать MIME-тип файла, а после этого кодеки, которые нужны для его воспроизведения.

В целом, кодеки вам не нужно трогать – их просто копируем, тоже самое с типом MIME. Вам нужно лишь задать правильный путь к файлу, чтобы все заработало, как надо. На веб-странице появился наш ролик. Чтобы у него были элементы управления, нужно добавить пустой атрибут controls.

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

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

Autoplay – пустой атрибут без значения. Если его указать, то воспроизведение начнется автоматически после полной загрузки страницы. Такой трюк часто делают на продающих страницах, чтобы моментально привлечь внимание человека.

Controls – очень важный параметр, тоже без значения. Он добавляет элементы управления. Собственно, он используется практически всегда, потому что нужно предоставить человеку возможность ставить видео на паузу или перематывать.

Loop – если этот параметр активен, воспроизведение начнется сначала после того, как оно завершилось. Иногда это вполне уместно. Например, если ролик очень интересный.

Preload – еще один интересный параметр, при его добавлении видео начнет загружаться вместе с загрузкой страницы. Таким образом, когда человек захочет его посмотреть, оно уже может быть частично или полностью загружено, что хорошо, поскольку человеку не придется ждать.

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

Poster – в качестве значения этому атрибуту передается путь к изображению, которое станет миниатюрой к ролику. В целом, это может иметь значение – красивая, привлекающая внимание картинка может побудить пользователя к просмотру. C помощью параметра poster можно задать путь к изображению, которое будет видно до начала воспроизведения нашего ролика. Например:

<video controls poster = «poster.png»>

Все данные атрибуты записываются в контейнере video, а не в одинарных тегах source. В них нужно указывать только путь к файлу и типы MIME.

Я тут не указал еще два параметра – ширина и высота, но я считаю, что их правильнее будет настроить уже в css. Там же к тегу video можно применить много других свойств, хотя не все из них могут подействовать.

Как вставить видео с youtube

Но если видеоролик есть на youtube и его вам нужно вставить в свою запись, как это сделать? Тут я вижу как минимум два варианта. Во-первых, у самого ролика на youtube есть блок «Поделиться». Там можно взять html-код, который потом нужно вставить в редакторе (в режиме html).

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

HTML5 Video Tag » Встраивание видео в HTML

Помните, когда тега видео HTML5 не существовало? Может и нет, на самом деле. Элемент `video` был впервые предложен Opera в 2007 году, а позже был добавлен в спецификацию HTML5. До этого, если вы хотели добавить видео на HTML-страницу, вам приходилось использовать Adobe Flash. С этим было несколько проблем: Flash имеет длинную историю недостатков безопасности, интенсивно использует ЦП и не поддерживается на Android или iOS.Очевидно, нам нужна была легкая альтернатива, изначально поддерживаемая через Интернет и безупречно работающая на мобильных устройствах. Введите элемент `

В этом посте я покажу вам, как его использовать. Вы узнаете как об основных, так и о расширенных вариантах использования элемента `video`, как обеспечить воспроизведение ваших видео в браузерах, предоставив несколько видеоисточников, как сделать ваши видео доступными, включив титры/субтитры с помощью WebVTT, а также как убедитесь, что ваши видео остаются отзывчивыми.

Что такое видеоэлемент HTML5 и для чего он используется?

Элемент `

Согласно статистике Can I Use, элемент `

Чтобы добавить видео на страницу с помощью элемента `

Позвольте мне разбить это:

— «элементы управления»: указывает, что элементы управления видео, такие как «Воспроизведение», «Пауза», «Громкость» и т. д.должно отображаться, позволяя пользователю управлять воспроизведением видео.

— `src`: указывает местоположение или путь к видеофайлу, который вы хотите встроить.

— «тип»: определяет тип или формат MIME видеофайла, помогая браузеру заранее определить, может ли он декодировать файл. Это приводит к более быстрой загрузке и рендерингу.

– `

`: текст в этом теге служит резервным содержимым, которое будет отображаться, если браузер пользователя не поддерживает элемент `video` или формат встроенного видео.

В этом примере показано основное использование  `

Проблема в том, что разные браузеры не поддерживают одни и те же форматы мультимедиа в своих реализациях HTML5 `

Таблица поддержки браузеров для видеоформата MP4

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

Как реализовать кроссбраузерную совместимость тегов видео HTML5

В настоящее время спецификация HTML5 поддерживает три видеоформата:

— ВебМ

— Огг

– MP4

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

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

К счастью, существует ряд конвертеров HTML-видео, которые можно использовать для преобразования видео из одного формата в другой, но у вас может возникнуть вопрос: «Значит ли это, что мне нужно каждый раз конвертировать все мои видео в три разных формата?»

На мой взгляд, включать все три формата излишне.Я бы предложил использовать MP4 и WebM. MP4 имеет наибольшую поддержку браузерами, а браузеры, которые не поддерживают его, полностью поддерживают WebM. Я предлагаю WebM, а не Ogg, потому что он высокого качества, с открытым исходным кодом и имеет меньший размер файлов, что делает его очень эффективным для мобильных устройств.

Другие атрибуты видео HTML5, которые вы должны знать

Помимо кроссбраузерной совместимости HTML5 `

– `width` и `height`: задайте ширину и высоту в пикселях, чтобы предотвратить мерцание и сдвиг страницы до того, как браузер загрузит видео.

– `loop`: Указывает, что видео должно воспроизводиться повторно, как только оно достигает конца.

— «без звука»: указывает, что видео должно быть отключено при загрузке. Затем пользователь может решить, включать звук или нет.

— «автовоспроизведение»: указывает, что видео должно начать воспроизводиться, как только оно загрузится.

— «плакат»: предоставляет URL-адрес изображения, которое можно использовать в качестве заставки или эскиза перед воспроизведением видео. Обратите внимание: если вы собираетесь указать изображение постера, то нет необходимости включать атрибут autoplay, поскольку он переопределяет атрибут poster.

— «длительность»: возвращает продолжительность видео в секундах. Вы можете использовать JavaScript для обработки и отображения этой информации в любом формате по вашему выбору.

— «playsinline»: указывает, что браузер должен воспроизводить видео прямо там, где оно есть, вместо того, чтобы открывать оверлейный экран, что является поведением по умолчанию в мобильных браузерах.

— «предварительная загрузка»: сообщает браузеру о необходимости предварительной загрузки видео для более быстрого воспроизведения. Обратите внимание, что свойство preload игнорируется, если присутствует `autoplay`. Возможные значения:

    –  `metadata`: сообщает браузеру, что пользователю не нужно видео, но предлагает получить его метаданные (размеры, список дорожек, продолжительность и т. д.).Это значение по умолчанию в Chrome.

    –  `auto`: указывает браузеру загрузить видео целиком.

    – `none`: без предварительной загрузки.

— «autoPictureinPicture»: отражает атрибут HTML, указывающий, переходит ли видео в режим «картинка в картинке» автоматически, когда пользователь переключается с одного документа на другой.

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

Как улучшить специальные возможности для видео

«Сила Интернета в его универсальности. Доступ для всех, независимо от инвалидности, является важным аспектом». – Тим Бернерс-Ли

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

Технология для достижения этого в Интернете известна как формат текстовых дорожек веб-видео или WebVTT. Это формат для отображения синхронизированных текстовых дорожек вместе с видео с использованием элемента HTML``.

Вот как выглядит типичный файл WebVTT:

Типовой файл WebVTT

Примечание. Диапазон времени должен быть указан в формате _hh:mm:ss:ttt_ или _mm:ss:tt_, где _hh_ – это часы и должно содержать до двух цифр, _mm_ – минуты (0–59), _ss_ – секунды (0–59). –59), _ttt_ — это миллисекунды (0–999).

Вы можете создавать файлы WebVTT вручную или автоматически, используя инструмент распознавания речи.

Создав этот файл, вы можете встроить его в HTML-видео с помощью элемента `` следующим образом:

Позвольте мне объяснить, что делает каждый атрибут в элементе ``:

— «по умолчанию»: указывает, что дорожка должна включаться автоматически, когда начинается воспроизведение видео.

– `srclang`: Указывает язык, на котором находится дорожка.

– `kind`: указывает тип предоставляемой текстовой дорожки. Возможные значения:

    – `субтитры`: накладывает письменные переводы диалогов и другого видеоконтента (например, текста или изображений) на видео. Обычно предназначен для слушателей, которые не понимают исходный язык, используемый в аудио.

    – `captions`: транскрипция аудио накладывается на видео. Отличие от субтитров состоит в том, что субтитры обычно написаны на том же языке, что и звук, и носят более описательный характер, иногда отображая невербальные сигналы, такие как звуковые эффекты или имя текущего говорящего. Предназначен для людей с нарушениями слуха, смотрящих в шумном месте или с отключенным звуком.

    – `описания`: накладывает на видео полное звуковое описание всего видеоконтента, от диалогов и действий до звуковых эффектов и реплик. Предназначен для людей, которые слепы или не могут видеть видео.

    – `главы`: включает заголовки для различных частей (например, разделов или эпизодов) видеоконтента. Главы иногда отображаются в виде интерактивного списка в интерфейсе браузера, чтобы зрители могли легко переходить к различным разделам видео.

– `src`: указывает URL-адрес файла текстовой дорожки.

Пример видео HTML5 с титрами, с разработчиком Gift Egwuenu

– `label`: Определяет заголовок текстовой дорожки. Для субтитров должно быть указано, для какого языка предназначен набор субтитров, например, для немецкого или французского. В пользовательском интерфейсе появятся метки, позволяющие пользователям легко выбирать язык субтитров, который они хотят видеть.

Как сделать так, чтобы видео реагировало на ширину экрана

Вы видели атрибуты `width` и `height` элемента видео HTML5 и то, как их можно использовать для установки статических размеров видео.Но объявление статической ширины — плохая идея, когда речь идет об отзывчивости. Что происходит, когда родительский контейнер для этого видео сжимается меньше заявленной ширины? Видео, вероятно, переполнит экран и будет выглядеть нелепо, если вообще его будет невозможно смотреть.

Например, видео на изображении ниже имеет статическую ширину 600 пикселей. При доступе через мобильное устройство с разрешением 350 пикселей он переполняет область просмотра.

Пример не отвечающего видео на мобильном телефоне

Чтобы сделать элемент `

Адаптивный видеоэлемент CSS

Видео имеет высоту «авто», чтобы гарантировать, что исходное соотношение сторон видеоконтента сохраняется на всех экранах.

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

Пример адаптивного HTML5-видео

Если вы хотите, чтобы видео содержалось в разделе, вы можете просто обернуть элемент `