Было время, когда Интернет использовался в основном для обмена данными научных исследований. Потом было время перемен, и в мгновение ока Интернет стал одним из двигателей новостной индустрии и торговли. Еще несколько мгновений, и вот мы уже здесь, с Интернетом, использующим новейшие сетевые технологии для доставки на дом по всему миру невероятнейших объемов видеоинформации самого разного содержимого от трансляций с марсохода в режиме реального времени до дешевой комедии.
Важность этого сдвига трудно переоценить. Проект, который в начале 2005 г. был на стадии «разве не было бы это замечательно», теперь реализовался в виде YouTube. Видеосюжеты продолжительностью в 3—4 минуты наводнили Интернет. И, как докладывает гигант сетевого оборудования и услуг Cisco, эта тенденция не замедляется, и, согласно оценкам этой компании, к 2014 г. ошеломляющие 90% всего интернет-трафика будет составлять видео.
Поразительно, это грандиозное изменение произошло несмотря на то, что HTML и браузеры не обладают встроенной поддержкой видео и даже аудио. Вместо этого они полагаются на подключаемые модули, такие как Flash, которые удовлетворяют надобности большинства пользователей в большинстве случаев. Но в этом HTML-видеопокрытии есть очевидные мертвые зоны, наподобие той, которую создал iPad компании Apple, не поддерживающий Flash.
Стандарт HTML5 пытается решить эти пробелы введением элементов <audio> и <video>, которых так не хватало в HTML все эти годы. Наконец, содержимое мультимедиа получило единообразную, стандартную поддержку, не требующую подключаемых модулей. Но не все в этой истории так гладко. Основные разработчики браузеров сцепились в битве аудио- и видеоформатов, которая намного грязнее, чем война форматов Blu-Ray и HD-DVD.
Печальным последствием этой битвы является отсутствие единого аудио- и видеоформата, который бы работал на всех браузерах, и чтобы файлы мультимедиа можно было бы воспроизводить в HTML их нужно кодировать по-разному для разных браузеров.
Основные сведения о воспроизведении видео в современных программах
Не прибегая к HTML5, видео в веб-страницу можно добавить двумя способами. Самый простой состоит в использовании элемента <embed>. Потом браузер создаст видеоокно под проигрыватель Windows Media Player, Apple QuickTime или какой-либо другой проигрыватель и разместит его на странице.
Основная проблема с этим подходом заключается в том, что он полностью отдает разработчика на милость поддержки браузера. Разработчик не властен управлять воспроизведением, может не иметь возможности буферизировать видео, чтобы предотвратить задержки с воспроизведением, а также не знает, сможет ли данный видеофайл воспроизводиться в разных браузерах или операционных системах.
Второй подход заключается в использовании подключаемого модуля браузера, наподобие сравнительно недавнего новичка в этой области Silverlight корпорации Microsoft или старожила Flash от компании Adobe.
До недавнего времени использование модуля Flash полностью решало задачу поддержки видеосодержимого браузерами. Ведь видеоформат Flash работает всюду, где установлен модуль Flash, что в настоящее время составляет свыше 96% подключенных к Интернету компьютеров. Технология Flash также предоставляет почти неограниченный контроль над воспроизведением видео. Разработчик может, например, использовать готовый видеоплеер Flash сторонней фирмы или создать собственный и индивидуально оформить каждую кнопку управления.
Но подход с использованием Flash также не идеальный. Чтобы вставить видео Flash в веб-страницу, в нее нужно вставить определенный объем безобразной разметки, содержащей элементы <object> и <embed>. Кроме этого, видеофайлы для показа нужно закодировать в требуемый формат, а также может потребоваться приобрести дорогостоящий инструментарий Flash-разработки и научиться пользоваться им, что может потребовать серьезных усилий. Но хуже всего, это новая волна мобильных устройств компании Apple — iPhone и iPad. Эти устройства органически не воспринимают Flash и выводят пустую рамку в том месте страницы, где вставлено это видео.
Модули расширения также имеют свойство временами сбоить. Причина кроется в принципе их работы. Например, при посещении страницы, на которой используется видео Flash, браузер позволяет модулю Flash взять под контроль прямоугольную область где-нибудь на странице. В большинстве случаев этот подход работает нормально, но незначительные ошибки или нестандартные системные настройки могут вызвать неожиданные помехи и сбои, такие как, например, искаженное видео или потребление веб-страницей огромных объемов памяти, в результате чего картинка начинает ползти, как улитка.
Тем не менее, если вы сегодня просматриваете видео в Интернете (но не с помощью iPhone или iPad), то, скорее всего, это видео обернуто в мини-приложение Flash. Если вы не уверены, щелкните на видеоплеере правой кнопкой мыши. Если откроется меню с командой наподобие «О программе Adobe Flash Player», тогда вы наверняка имеете дело с вездесущим модулем Flash.
В 2010 г. сервис YouTube ввел в действие HTML-видеопроигрыватель на испытательной основе. Попробовать этот проигрыватель можно, посетив www.youtube.com/html5. Но во всех других случаях YouTube полагается исключительно на Flash.
Видео и аудио в HTML5
Поддержка видео и аудио HTML5 основана на простой идее. Точно так же, как с помощью элемента <img> в веб-страницу можно вставлять изображения, в нее должно быть возможным вставить звук посредством элемента <audio> и видео с помощью элемента <video>. Вполне логично, HTML5 позволяет вставлять оба эти типа мультимедиа.
К сожалению, некоторые аспекты воспроизведения мультимедиа находятся вне досягаемости новых аудио- и видеовозможностей HTML5. Для следующего содержимого и/или способов его воспроизведения нужно опять обращаться к Flash (по крайней мере, на данный момент):
Лицензированное содержимое. Видеофайлы HTML5 не используют никакой системы для защиты от копирования. По сути, народ может загружать HTML5-видео с такой же легкостью, как и изображения — просто щелкнув правой кнопкой мыши по видео и выбрав опцию Сохранить.
Потоковое аудио или видео. В HTML5 нет способа для передачи аудио или видео от одного компьютера к другому в потоковом режиме. Поэтому, разработчикам чат-программ, в которых посетители веб-страницы используют микрофон и/или веб-камеру, придется продолжать работать с Flash. Разработчики HTML5 экспериментируют с элементом <device>, который может предоставить эту возможность, но в настоящее время решения с использованием только HTML5 нет ни для одного браузера.
Адаптивное потоковое видео. Для продвинутых веб-сайтов с большими объемами видеосодержимого, наподобие YouTube, требуется многоуровневое управление буферизацией и пересылкой видеопотока. Им нужно предоставлять видео в разных разрешениях, видеособытий реального времени, а также настраивать качество видео под пропускную возможность интернет-подключения пользователя. До тех пор пока HTML5 не сможет предоставлять эти возможности, видеообменные сайты могут добавить поддержку HTML5 только как опцию, но полностью переходить на него с Flash не будут.
Высококачественное аудио с низкой задержкой. Некоторые приложения требуют начинать воспроизведение аудио без задержки или проигрывать несколько аудиоклипов с идеальной синхронизацией. В качестве примеров таких приложений можно назвать виртуальный синтезатор, музыкальный визуализатор или игру реального времени с множеством накладывающихся звуковых эффектов. И в то время как разработчики браузеров усиленно работают над улучшением HTML5-аудиопроизводительности, оно еще не отвечает этим требованиям.
Динамическое создание или редактирование аудио. А если вам нужно не только воспроизводить записанное аудио, но также анализировать аудиоинформацию, модифицировать или создавать аудио — и все это в режиме реального времени? Новые стандарты, такие как Audio Data API, разрабатываемые под спонсорством Firefox, состязаются в добавлении возможностей этого типа к HTML5-аудио, но в настоящее время они еще не доступны.
Воспроизведение аудио с помощью элемента <audio>
В следующем коде приведен простейший пример использования элемента <audio>:
<p>Зацените новую песню <cite>Avicii - Wake Me Up</cite></p>
<audio src="mysong. mp3" controls></audio>
Атрибут src содержит имя аудиофайла для воспроизведения, а атрибут controls указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением. Своим внешним видом эти элементы управления слегка отличаются от браузера к браузеру, но все они имеют одинаковое назначение: разрешают пользователю начинать и останавливать воспроизведение, переходить в другое место записи и регулировать громкость:
Элементы <audio> и <video> должны иметь как открывающий, так и закрывающий тег. Использование синтаксиса пустых элементов (например, <audio/>) не допускается.
Кроме атрибута controls элемент <audio> поддерживает еще три атрибута: preload, auotoplay и loop. Атрибут preload указывает браузеру способ загрузки аудиофайла. Значение auto этого атрибута указывает браузеру загружать аудиофайл полностью, чтобы он был доступен, когда пользователь нажмет кнопку воспроизведения. Конечно же, загрузка осуществляется в фоновом режиме, чтобы посетитель веб-страницы мог перемещаться по странице и просматривать ее, не дожидаясь завершения загрузки аудиофайла.
Атрибут preload может принимать еще два значения. Значение metadata указывает браузеру загрузить первую небольшую часть файла, достаточную, чтобы определить некоторые его основные характеристики (например, общий размер файла). Значение none указывает браузеру не загружать аудиофайл автоматически. Эти опции можно использовать для того, чтобы сэкономить пропускную способность подключения, например, если страница содержит большое число элементов <audio>, но ожидается, что пользователь будет проигрывать лишь некоторые из них:
Когда атрибуту preload задано значение none или metadata, загрузка аудиофайла начинается после того, как пользователь нажмет кнопку воспроизведения. К счастью, браузеры могут без проблем проигрывать одну часть аудиофайла в то время, как грузится другая, если только интернет-подключение не слишком медленное.
Если значение атрибута preload не установлено, то браузеры действуют по своему индивидуальному усмотрению. Большинство браузеров предполагает auto в качестве значения по умолчанию, но в Firefox это metadata. Кроме этого, важно помнить, что атрибут preload не является обязательным для выполнения правилом, а рекомендацией браузеру желаемого действия, которую он может игнорировать зависимости от других обстоятельств. А некоторые устаревшие браузеры вообще не обращают внимания на атрибут preload.
Если вставить в разметку несколько элементов <audio>, то браузер создаст отдельную полосу элементов управления воспроизведением для каждого из них. Посетитель веб-страницы может прослушивать аудио на одном из них или на всех сразу.
Атрибут autoplay указывает браузеру начать воспроизведение сразу же после завершения загрузки страницы:
Если этот атрибут не используется, пользователь должен нажать кнопку запуска, чтобы начать воспроизведение.
Элемент <audio> можно использовать для того, чтобы проигрывать фоновую музыку или обеспечить звуковые эффекты в игре с браузерным интерфейсом. Для этого из него нужно убрать атрибут controls и вставить атрибут autoplay (или же осуществлять воспроизведения посредством кода JavaScript). Но будьте осторожны в применении этого подхода и не забывайте, что для такой страницы все равно требуется какой-либо способ для прекращения воспроизведения.
Наконец, атрибут loop указывает браузеру повторять воспроизведение:
<audio src="mysong.mp3" controls loop></audio>
Воспроизведение в большинстве браузеров достаточно плавное, что позволяет создать с помощью этого метода непрерывную повторяющуюся звуковую дорожку. Секрет состоит в том, чтобы использовать повторяемое аудио, с одинаковым началом и окончанием.
Воспроизведения видео с помощью элемента <video>
С элементом <audio> хорошо идет в паре элемент <video>. Он применяет такие же атрибуты src, controls, autoplay и loop. Пример использования этого элемента показан в следующем коде:
<p>Зацените новый клип <cite>Avicii - Wake Me Up</cite></p>
<video src="video.mp4" controls></video>
Как и в случае с элементом <audio>, атрибут controls указывает браузеру создать набор элементов управления воспроизведением. В большинстве браузеров эти элементы скрываются при щелчке где-нибудь в области страницы и отображаются опять при наведении курсора мыши на область видеоплеера:
Кроме общих с элементом <audio> атрибутов, элемент <video> имеет три своих собственных атрибута: height, width и poster.
Атрибуты height и width устанавливают высоту и ширину окна воспроизведения в пикселах, соответственно. Следующий код показывает пример создания область воспроизведения размером 600×400 пикселов:
<p>Зацените новый клип <cite>Avicii - Wake Me Up</cite></p>
<video src="video. mp4" controls></video>
Размеры окна воспроизведения должны совпадать с размером видео, но лучше явно указать их, чтобы оформление страницы не искажалось до того, как видеофайл загрузится (или если видеофайл вовсе не загружается).
Наконец, атрибут poster позволяет указать изображение, которое можно использоваться вместо видео:
<p>Зацените новый клип <cite>Avicii - Wake Me Up</cite></p>
<video src="video.mp4" controls poster="poster.jpg"></video>
Браузеры показывают это изображение в трех ситуациях: когда первый кадр видео еще не загрузился, атрибуту preload присвоено значение none или указанный видеофайл отсутствует.
Хотя на данном этапе мы рассмотрели всё, относящееся к аудио- и видеоразметке, эти возможности можно значительно расширить с помощью кода JavaScript. Но прежде чем мы углубимся в изучение элементов <audio> и <video>, нам нужно разобраться с проблемами поддержки аудио- и видеокодеков.
HTML-видео — как встроить видеоплеер с тегом HTML 5 Video
До появления HTML 5 веб-разработчикам приходилось вставлять видео на веб-страницу с помощью подключаемого модуля, такого как Adobe Flash Player.
Сегодня вы можете легко вставлять видео в HTML-документ с помощью тега <video>.
В этой статье мы увидим, как этот тег <video> работает в HTML.
Базовый синтаксис
Так же, как и тег <img>, <video>принимает атрибут src, с помощью которого нужно указать источник видео.
<video src="weekend.mp4"></video>
По умолчанию он отображается как изображение в браузере:
Этот CSS центрирует все на веб-странице и меняет цвет фона:
Кроме того, вы можете указать несколько источников видео для <video> с помощью тега <source>. Этот тег <source> также должен иметь собственный атрибут src.
Вы можете использовать несколько тегов <source>, чтобы сделать доступными разные форматы одного и того же видео. Затем браузер будет воспроизводить формат, который он поддерживает.
Тег <video> поддерживает глобальные атрибуты, такие как id, class, style и т. д.
Если вам интересно, что такое глобальные атрибуты, это атрибуты, поддерживаемые всеми тегами HTML.
Конкретные атрибуты, поддерживаемые тегом <video>, включают src, poster, controls, loop, autoplay, width, height, muted, preload, и другие.
Атрибут src
Атрибут src используется для указания источника видео. Это может быть относительный путь к видео на вашем локальном компьютере или ссылка на живое видео из Интернета.
<video src="weekend.mp4"></video>
Это необязательно, потому что вы можете использовать тег <source> вместо него.
Атрибут poster
С помощью атрибута poster вы можете добавить изображение, которое будет отображаться до начала воспроизведения видео или во время его загрузки.
Вместо изображения первой сцены видео браузер покажет это изображение:
Атрибут controls
Когда вы используете элемент control, он позволяет браузеру отображать контроллеры воспроизведения, такие как воспроизведение и пауза, громкость, поиск и т. д.
С помощью атрибута loop вы можете автоматически повторять видео. То есть заставлять его воспроизводиться снова каждый раз, когда оно прекращает воспроизведение.
Вы можете использовать атрибуты width и height, чтобы указать ширину и высоту видео в пикселях. Он принимает только абсолютные значения, например, пиксели.
В этой статье вы узнали о теге HTML5 <video> и его атрибутах, чтобы правильно использовать его в своих проектах.
Поскольку звук является важной частью полного видео, вы также можете использовать тег <video> для размещения аудиофайла на веб-странице. Но в большинстве случаев вы должны использовать тег <audio> для этой цели для соответствующего взаимодействия с пользователем.
Если вы считаете эту статью полезной, поделитесь ею со своими друзьями и семьей, чтобы она могла дойти до большего числа людей, которым она может понадобиться.
HTML-видео — javatpoint
следующий →
← предыдущая
HTML 5 также поддерживает тег
В настоящее время для тега видео HTML поддерживаются три видеоформата:
MP4
вебМ
огг
Давайте посмотрим на таблицу, определяющую, какой веб-браузер поддерживает формат видеофайла.
Browser
mp4
webM
ogg
Internet Explorer
yes
no
no
Google Chrome
yes
yes
yes
Mozilla Firefox
yes
да
да
Opera
нет
да
да
Apple Safari
4 нет0034
нет
Android также поддерживает формат mp4.
Пример тега видео HTML
Давайте посмотрим код для воспроизведения файла mp4 с использованием тега видео HTML.
<управление видео> Ваш браузер не поддерживает тег html video.
Протестируйте сейчас
Давайте посмотрим на пример воспроизведения файла ogg с использованием тега видео HTML.
<управление видео> Ваш браузер не поддерживает тег html video.
Поддержка браузеров
Element
Chrome
IE
Firefox
Opera
Safari
Yes
Yes
Yes
Yes
Yes
Атрибуты тега видео HTML
Давайте посмотрим на список атрибутов тега видео HTML 5.
Атрибут
Описание
элементы управления
Определяет элементы управления видео, которые отображаются с кнопками воспроизведения/паузы.
высота
Используется для установки высоты видеоплеера.
ширина
Используется для установки ширины видеоплеера.
постер
Указывает изображение, которое отображается на экране, когда видео не воспроизводится.
autoplay
Указывает, что воспроизведение видео начнется, как только оно будет готово.
цикл
Указывает, что видеофайл будет начинаться заново каждый раз, когда он будет завершен.
без звука
Используется для отключения видео выхода.
preload
Указывает авторское представление для загрузки видеофайла при загрузке страницы.
src
Указывает исходный URL-адрес видеофайла.
Пример атрибута тега видео HTML
Давайте посмотрим на пример тега видео в HTML, где используются высота, ширина, автовоспроизведение, элементы управления и атрибуты цикла.
<видео управляет циклом автовоспроизведения> Ваш браузер не поддерживает тег html video.
Протестируйте сейчас
Типы MIME для формата HTML Video
Доступный тег видео HTML типа MIME приведен ниже.
Видео -формат
MIME Тип
MP4
Видео/MP4
OGG
Видео/OGG
Webm
0034
video/webM
Следующая темаHTML svg
← предыдущая
следующий →
Использование элемента HTML для воспроизведения видео на вашем веб-сайте
Мы прошли долгий путь с тех пор, как Flash де-факто был подключаемым модулем для надежного воспроизведения видео в браузерах.
Сегодня это так же просто, как добавить 3 строки HTML-кода:
<элементы управления видео>
<видео> 9Элемент 0250 теперь является стандартным способом встраивания видео на веб-страницы. Он уже некоторое время поддерживается всеми современными браузерами и обладает достаточной функциональностью.
Вы также можете использовать для аудиоконтента, но элемент может обеспечить более подходящее взаимодействие с пользователем.
Вот более сложный пример:
<элементы управления видео controlList="nodownload" poster="initialimage.png" muted>
скачать видео
Приведенный выше видеоплеер:
показывает изображение для предварительного просмотра
воспроизводит видео 640×480, звук которого по умолчанию отключен
скрывает кнопку загрузки
имеет ссылку на видео в качестве запасного варианта для очень старых браузеров
Смело копируйте, вставляйте и адаптируйте код под свои нужды .
Но видеоплееры, встроенные в современные браузеры, имеют еще больше возможностей:
Отображение или скрытие элементов управления видео, включая воспроизведение/паузу, громкость, переключение в полноэкранный режим и ползунок поиска с помощью управляет атрибутом .
Скрытие (новых) кнопок загрузки, полноэкранного режима или удаленного воспроизведения с помощью атрибута controlList (только Chrome 58, пример кода)
Задайте изображение постера для отображения во время загрузки или невоспроизведения видео с помощью атрибута poster .
Предоставьте список видео в разных форматах, чтобы каждый браузер мог воспроизводить формат, который он поддерживает, используя несколько <источник> элементов.
Включите скрытые субтитры или субтитры на нескольких языках с помощью элемента и субтитров WebVVT.
Сообщите браузеру, следует ли начинать загрузку видео при загрузке страницы или только тогда, когда пользователь нажимает кнопку «Воспроизвести», используя атрибут preload .
Автоматическое воспроизведение видео, как только оно будет готово, с использованием атрибута автозапуска
Воспроизведите видео один раз или в цикле, используя атрибут цикл .
Укажите, хотите ли вы воспроизводить видео без звука (без звука), используя атрибут без звука . Например, автоматические видеоролики на Facebook отображают параметр отключения звука, наложенный на видео.
Укажите точку в видео, с которой должно начаться воспроизведение, добавив #t=20 к URI видео (URI фрагментов мультимедиа, пример)
PlaybackRate и defaultPlaybackRate Атрибуты, доступные через DOM, позволяют нам управлять скоростью воспроизведения видео
Укажите, что видео должно воспроизводиться встроенно в Safari на iOS 10+, используя новый атрибут playsinline
Ведь видеоформат Flash работает всюду, где установлен модуль Flash, что в настоящее время составляет свыше 96% подключенных к Интернету компьютеров. Технология Flash также предоставляет почти неограниченный контроль над воспроизведением видео. Разработчик может, например, использовать готовый видеоплеер Flash сторонней фирмы или создать собственный и индивидуально оформить каждую кнопку управления.
Попробовать этот проигрыватель можно, посетив www.youtube.com/html5. Но во всех других случаях YouTube полагается исключительно на Flash.
mp3" controls></audio>
Конечно же, загрузка осуществляется в фоновом режиме, чтобы посетитель веб-страницы мог перемещаться по странице и просматривать ее, не дожидаясь завершения загрузки аудиофайла.
Он применяет такие же атрибуты src, controls, autoplay и loop. Пример использования этого элемента показан в следующем коде:
mp4" controls></video>
Этот тег 
То есть заставлять его воспроизводиться снова каждый раз, когда оно прекращает воспроизведение.
mp4"
poster="benefits-of-coding.jpg"
></video>
