Видео и аудио теги предоставляют разработчику богатый пользовательский интерфейс без необходимости устанавливать сторонние плагины, такие как QuickTime, Flash или Silverlight. Это потому, что эти теги встроены непосредственно в веб-страницу.
Это, в свою очередь, имеет большое значение, поскольку может сэкономить вам много времени на разработку. Современные браузеры, такие как Chrome, Firefox, IE9 ( и новичок IE10 ), поддерживают множество видео и аудио форматов.
Есть два больших преимущества использования видео и аудио тегов:
- Аппаратное ускорение. Воспроизведение видео в браузере с аппаратным ускорением потребляет значительно меньше ресурсов процессора, чем в другом браузере. Если вы управляете этими тегами в JavaScript, этот рендеринг может быть выгружен в графический процессор, который помогает в отзывчивости веб-сайта. Это важно, если вы хотите, чтобы воспроизведение было упрощено.
- Плагин бесплатный. Вам не нужно беспокоиться о пользователях, загружающих нужный плагин, или о сложностях в поддержке многих из них .
Если вы не знакомы с HTML5, прежде чем углубиться в эту статью, вы можете прочитать « Да, вы можете использовать HTML5 сегодня!» и HTML5 и даже более интересные формы .
Разметка для видео
Видео-тег — это круто, потому что он дает вам возможность вставлять видео-контент прямо на веб-страницу без использования стороннего плагина. Для начала давайте посмотрим на тег видео, и я объясню каждый атрибут.
<video width="320" src="intro.mp4" height="240" poster="intro.jpg" autoplay controls loop autobuffer > This content appears if the video tag or the codec is not supported. </video> Вот разбивка атрибутов:
- ширина — устанавливает ширину видео элемента в пикселях. Если ширина не указана, браузер будет использовать ширину видео по умолчанию, если она доступна.
- высота — устанавливает высоту элемента видео. Если высота не указана, браузер будет использовать высоту видео по умолчанию, если она доступна.
- src — устанавливает видео файл для воспроизведения. Для охвата вы должны предоставить видео форматы, которые поддерживаются наиболее популярными браузерами.
- poster — устанавливает файл изображения, который будет отображаться во время загрузки видеоконтента или до тех пор, пока пользователь не воспроизведет видео. Если файл постера пропущен, браузер покажет первый кадр видео.
- autoplay — дает браузеру команду автоматически воспроизводить видео при загрузке страницы.
- controls — отображает элементы управления видео для управления воспроизведением видео. Элементы управления видны, когда пользователь наводит курсор на видео. Также возможно переключаться между элементами управления.
- loop — инструктирует браузер зацикливать воспроизведение мультимедиа.
- autobuffer — используется, когда автозапуск не используется. Видео загружается в фоновом режиме, поэтому, когда пользователь решает посмотреть видео, оно начинается немедленно.
Давайте использовать IE9 в качестве примера для представления современных браузеров. Они увидят воспроизводимое видео:
Если пользователь использует старый браузер, например IE6, 7 или 8, он увидит это сообщение.
Причина, по которой более ранние версии IE отображают это сообщение, проста: они не поддерживают тег видео. Но что произойдет, если браузер не поддерживает видео, которое вы пытаетесь воспроизвести? Чтобы обойти эту проблему, просто добавьте несколько источников видео. Тег видео поддерживает дочерние элементы источника. Вот как выглядит HTML.
<video width="320" height="240" poster="intro.jpg" autoplay controls loop> This content appears if the video tag or the codec is not supported. <source src="intro.mp4" type="video/mp4" /> <source src="intro.webm" type="video/webm" /> <source src="intro.ogv" type="video/ogg" /> </video>
Добавляя несколько источников, браузер будет перемещаться по списку сверху вниз, пока не найдет источник видео, который он может воспроизвести. Вот разбивка атрибутов.
- src — устанавливает видео файл для воспроизведения. Для охвата вы должны предоставить видео форматы, которые поддерживаются наиболее популярными браузерами.
- type — сообщает браузеру, какой тип контейнера используется.
Важно отметить атрибут type. Если это не указано, браузер должен загрузить небольшой фрагмент каждого файла, чтобы определить, поддерживается он или нет. Это полная трата пропускной способности и совершенно ненужная.
В приведенном выше коде мы удалили атрибут src и заменили его тремя исходными дочерними элементами. Основная причина поставки нескольких видеоисточников — это охват. Не все браузеры поддерживают одни и те же кодеки, поэтому важно создать видеофайл и кодировать его с помощью правильного кодека, поддерживаемого вашим целевым браузером.
В этом случае современный браузер выберет первый источник и воспроизведет связанный с ним исходный файл. Также в приведенном выше коде видео будет автоматически воспроизводиться при загрузке страницы. Это может не понравиться некоторым вашим пользователям, так что это хороший вариант, чтобы отключить это и позволить им запускать видео, когда они захотят. Чтобы дать им эту возможность, мы используем JavaScript.
Элемент video поддерживает методы воспроизведения и паузы , что дает вам возможность программно управлять видео. Следующий пример делает именно это.
<script type="text/javascript"> var vid = function() { return { play: function() { var v = document.getElementById("myVideo"); v.play(); }, pause: function() { var v = document.getElementById("myVideo"); v.pause(); } } } (); </script> <body> <h1>Video and legacy browser fallback</h1> <video width="320" height="240" poster="intro.jpg" id="myVideo"> This content appears if the video tag or the codec is not supported. <source src="intro.mp4" type="video/mp4" /> <source src="intro.webm" type="video/webm" /> <source src="intro.ogv" type="video/ogg" /> </video> <br /> <button onclick="vid.play();">Play</button> <button onclick="vid.pause();">Pause</button> </body>
Вот как будет выглядеть веб-страница с кнопками воспроизведения и паузы.
Это лучший вариант, поскольку он дает пользователю возможность начать воспроизведение видео, когда он решит. Вы даже можете увеличить или уменьшить громкость, используя метод громкости . Вот как это сделать.
<script type="text/javascript"> var vid = function() { return { increase: function() { var v = document.getElementById("myVideo"); v.volume += 0.2; }, decrease: function() { var v = document.getElementById("myVideo"); v.volume -= 0.2; } } } (); </script> <body> <h1>Video and legacy browser fallback</h1> <video width="320" height="240" poster="intro.jpg" id="myVideo" > This content appears if the video tag or the codec is not supported. <source src="intro.mp4" type="video/mp4" /> <source src="intro.webm" type="video/webm" /> <source src="intro.ogv" type="video/ogg" /> </video> <br /> <button onclick="vid.increase();">Volumne Up</button> <button onclick="vid.decrease();">Volumne Down</button> </body>
Полный список всех методов и событий, которые вы можете использовать с тегом video, можно найти здесь .
Несколько видео форматов
В конце дня вам нужен правильный видеокодек для браузера, иначе видео не будет воспроизводиться. Это не намного проще, чем это. Трудно понять, какой формат поддерживается каким браузером. Вот популярные видео форматы:
Поскольку спецификация HTML 5 еще не завершена, упомянутые выше видеокодеки могут расширяться или уменьшаться в размере. Ранние проекты спецификации требовали, чтобы браузеры имели встроенную поддержку мультимедиа в двух кодеках; Ogg Vorbis для аудио и Ogg Theora для видео. В результате в спецификации не указывается, какие кодеки должны поддерживаться браузером.
Google объявил, что они открывают видео кодек под названием VP8. IE9 поддерживает этот кодек, если он установлен. Если вы хотите установить VP8 для IE9, вы можете скачать его здесь .
Разметка для аудио
Как и тэг video, тэг audio является фантастическим, потому что он дает вам возможность встраивать аудиоконтент в веб-страницу без использования стороннего плагина. Давайте посмотрим на аудио тег, и я объясню каждый атрибут.
<audio src="elvis.mp3" preload="auto" controls autoplay loop autobuffer muted crossorigin > This content appears if the audio tag or the codec is not supported. </audio>
Вот разбивка атрибутов:
- src — устанавливает аудиофайл для воспроизведения. Для достижения вы должны предоставить аудио форматы, которые поддерживаются наиболее популярными браузерами
- preload — нет / metadata / auto — где метаданные означают предварительную загрузку только метаданных и автоматически покидают браузер, чтобы решить, стоит ли предварительно загружать весь файл
- Средства управления — отображает элементы управления видео для управления воспроизведением видео. Элементы управления видны, когда пользователь наводит курсор на видео. Также возможно переключаться между элементами управления
- autoplay — указывает браузеру автоматически воспроизводить видео при загрузке страницы
- loop — инструктирует браузер зацикливать воспроизведение мультимедиа.
- autobuffer — используется, когда автозапуск не используется. Видео загружается в фоновом режиме, поэтому, когда пользователь решает посмотреть видео, оно начинается немедленно.
- muted — устанавливает аудиовыход по умолчанию.
- crossorigin — атрибут настроек CORS .
Если пользователь использует современный браузер, он услышит воспроизведение звука.
Если пользователь использует старый браузер, например IE6, 7 или 8, он увидит следующие комментарии.
Если браузер поддерживает аудиотег, но не аудиокодек, пользователь увидит следующий вывод.
Чтобы обойти эти проблемы, вы просто добавляете несколько источников звука. Аудио тег поддерживает дочерние элементы источника. Вот как выглядит HTML.
<audio preload="auto" loop autobuffer controls > This content appears if the audio tag or the codec is not supported. <source src="elvis.ogg" type="audio/ogg" /> <source src="elvis.mp3" type="audio/mpeg" /> </audio>
Добавляя несколько источников, браузер будет перемещаться по списку сверху вниз, пока не найдет источник звука, который он может воспроизвести. Вот разбивка атрибутов.
- src — устанавливает аудиофайл для воспроизведения. Для достижения цели вы должны предоставить аудио форматы, которые поддерживаются наиболее популярными браузерами.
- type — сообщает браузеру, какой тип контейнера используется.
Как и в случае с тегом video, важно указать атрибут type. Если это не указано, браузер должен загрузить небольшой фрагмент каждого файла, чтобы определить, поддерживается он или нет. Аудио тег будет запускаться из верхнего источника, пока не найдет аудиофайл, который он может воспроизвести.
Аудио тег доступен через JavaScript, поэтому можно создать несколько более эстетичных кнопок, позволяющих пользователю проигрывать и приостанавливать звук. В этом примере я использую border-radius, который доступен в CSS3, чтобы дать мне несколько округленных тегов div. Вот код
<head> <style type="text/css"> div { height: 1.5em; width: 5em; -moz-border-radius: 15px; border-radius: 15px; font-family: verdana; font-size: 0.8em; background-color: #e0e0e0; text-align: center; text-shadow: 0 -1px 1px #222; float: left; } </style> <script type="text/javascript"> var aud = function () { return { play: function () { var v = document.getElementById("myAudio"); v.play(); }, pause: function () { var v = document.getElementById("myAudio"); v.pause(); }, init: function () { var play = document.getElementById("play"); var pause = document.getElementById("pause"); play.addEventListener("click", aud.play); pause.addEventListener("click", aud.pause); } } } (); window.onload = aud.init; </script> </head> <body> <h1> Audio and legacy browser fallback</h1> <audio preload="auto" loop autobuffer id="myAudio"> This content appears if the audio tag or the codec is not supported. <source src="elvis.ogg" type="audio/ogg"> <source src="elvis.mp3" type="audio/mpeg"> </audio> <div id="play"> Play </div> <div id="pause"> Pause </div> </body> </html>
А закругленные кнопки воспроизведения и паузы можно увидеть ниже.
Я показал вам только две функции, доступные через JavaScript. Будьте уверены, что есть еще много возможностей для работы с вами через JavaScript. Полный список их можно найти здесь .
Поддерживаемые форматы
Аудио тег подходит только для файлов, которые вы предоставляете, поэтому вам нужно знать, какие кодеки поддерживаются. Вот популярные аудио форматы:
Это руководство стало возможным благодаря поддержке Microsoft. В сотрудничестве с Microsoft и независимо написанной SitePoint, мы стремимся работать вместе, чтобы разработать наиболее полезный и актуальный для вас контент.
Важно помнить, что, поскольку спецификация HTML5 находится в стадии разработки, упомянутые выше аудиокодеки могут расширяться или уменьшаться со временем, но можно с уверенностью сказать, что MP3 будет там, когда спецификация будет окончательно завершена.
Дальнейшее чтение
Чтобы узнать больше о видео и аудио HTML5, перейдите по следующим ссылкам: