HTML5 предоставляет вам два способа включения видео на веб-страницу и оба связаны с элементом <video>. Если у вас есть только один видеофайл, вы можете дать ссылку на него в атрибуте src. Это очень похоже на добавление изображения через тег <img src="...">. <video src="pr6.webm"></video> Технически это все что вам нужно. Но подобно тегу <img> вы должны всегда включать атрибуты width и height в тег <video>. Атрибуты width и height могут совпадать с максимальной шириной и высотой, которую вы указали во время процесса кодирования. Не беспокойтесь, если одна из сторон видео немного меньше указанных значений, ваш браузер центрирует видео внутри прямоугольника заданного тегом <video>. Пропорции видео никогда не будут искажены. <video src="pr6.webm" width="320" height="240"></video> По умолчанию для элемента <video> не добавляются кнопки управления. Вы можете создать собственные элементы управления со старым добрым HTML, CSS, и JavaScript. Для <video> действуют такие методы как play() и pause (), а также свойство currentTime. Есть также свойства volume и muted. Так что вы имеете все необходимое для создания своего собственного интерфейса. Если вы не желаете создавать свой интерфейс, то можете сказать браузеру вывести встроенные элементы управления. Для этого просто включите атрибут controls в тег <video>. <video src="pr6.webm" width="320" height="240" controls></video> Есть еще два дополнительных атрибута о которых я хотел бы упомянуть, прежде чем мы пойдем дальше: preload и autoplay. Не стреляйте в посланника, позвольте мне вначале объяснить, почему они полезны. Атрибут preload сообщает браузеру, что вы хотели бы начать загрузку видеофайлов как только страница загрузится. Это имеет смысл, если страница предназначена для просмотра важного видео. С другой стороны, если это просто дополнительный материал, то лишь немногие посетители будут его смотреть, тогда вы можете установить preload как none, чтобы сказать браузеру снизить сетевой трафик. Вот пример видео, которое начинает загрузку (но не воспроизведение), как только загрузится страница. <video src="pr6.webm" width="320" height="240" preload></video> А вот пример видео, которое не будет загружаться при загрузке страницы. <video src="pr6.webm" width="320" height="240" preload="none"></video> Атрибут autoplay делает именно то, как и звучит: говорит браузеру, что вы хотели бы начать загрузку видеофайла при загрузке страницы, и желаете воспроизвести видео автоматически при возможности. Некоторые люди любят это, другие ненавидят. Но позвольте мне объяснить, почему этот атрибут важен в HTML5. Отдельные люди хотят, чтобы их видео воспроизводилось автоматически, даже если это раздражает их посетителей. Если HTML5 не определяет стандартный способ автоматического воспроизведения видео, люди начнут прибегать к JavaScript, чтобы сделать это в любом случае. Например, вызывать метод play() пока загружаются события окна. Посетителям было бы гораздо труднее противодействовать этому. С другой стороны, это упрощает добавление в расширение браузера (или написать свое при необходимости) выражения «игнорировать атрибут autoplay, я не желаю воспроизводить видео автоматически». Вот пример видео, которое начнет загружаться и играть сразу же после загрузки страницы. <video src="pr6.webm" width="320" height="240" autoplay></video> А вот скрипт Greasemonkey, который можно установить в вашей локальной копии Firefox для предотвращения автоматического воспроизведения HTML5-видео. Он использует DOM-атрибут autoplay определенный в HTML5 и эквивалентный атрибуту autoplay в коде HTML. var arVideos = document.getElementsByTagName('video'); for (var i = arVideos.length - 1; i >= 0; i--) { var elmVideo = arVideos[i]; elmVideo.autoplay = false; } Но подождите секунду... Если вы следовали этой главе, то у вас есть не один видеофайл, а три. Один это OGV-файл, второй MP4- файл, третий WebM-файл. HTML5 обеспечивает способ сделать ссылки на все три файла с помощью элемента <source>. Каждый элемент <video> может содержать более одного тега <source>. Ваш браузер пройдется по списку источников видео по порядку и выберет первым то, что он в состоянии воспроизвести. Возникает другой вопрос: как браузер узнает, какое видео он сможет воспроизвести? Ну, в худшем случае он загружает каждое видео и пытается его сыграть, однако это большая трата пропускной способности. Вы сэкономите много трафика, если сообщите браузеру информацию о каждом видео. Это можно сделать атрибутом type тега <source>. <video width="320" height="240" controls> <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> </video> Давайте разберем это сверху вниз. Элемент <video> определяет ширину и высоту видео, но не ссылку на видеофайл. Внутри <video> три элемента <source>. Каждый элемент <source> ссылается на отдельный видеофайл (с атрибутом src), а также дает информацию о видеоформате (в атрибуте type). Тип атрибута выглядит сложным, адски сложным. Это комбинация из трех блоков информации: формат файла, видеокодек и аудиокодек. Давайте начнем с самого последнего. Для видеофайла .ogv формат контейнера это Ogg, представленный здесь как video/ogg, строго говоря, это MIME-тип для видеофайлов Ogg. Видеокодек Theora и аудиокодек Vorbis. Это достаточно просто, кроме формата значение атрибута, он немного странный. Само значение должно быть заключено в кавычки, поэтому вы должны использовать различные виды кавычек, чтобы окружить значение целиком. <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> С WebM почти так же, но с другим MIME-типом (video/webm вместо video/ogg) и другим видеокодеком (vp8 вместо theora) написанным в параметре codecs. <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> Видео H.264 является более сложным. Помните, я говорил, что видео H.264 и аудио AAC может быть в разных «профилях»? Мы кодируем H.264 с помощью «базового» профиля и AAC с профилем «низкая сложность» и все это внутри контейнера MPEG-4. Вся информация, включенная в атрибут type. <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> Преимуществом всех этих сложностей является то, что браузер проверяет атрибут type первым и смотрит, может ли он воспроизвести видеофайл. Если браузер решает, что он не может этого сделать, то не будет скачивать файл даже частично. Вы сэкономите на пропускной способности, а ваши посетители увидят видео, за которым они пришли, быстрее. Если вы будете следовать инструкциям этой главы при кодировании видео, то можете просто скопировать и вставить значения атрибута type из примеров. В противном случае, вам нужно выработать параметры type для себя. Выдержка из статьи Влада Мержевича Полный текст статьи можете прочитать по ссылке: http://htmlbook.ru/html5/video
Все для начинающего web-мастера
Как вставить видео на сайт
HTML5 предоставляет вам два способа включения видео на веб-страницу и оба связаны с элементом <video>. Если у вас есть только один видеофайл, вы можете дать ссылку на него в атрибуте src. Это очень похоже на добавление изображения через тег <img src="...">.
<video src="pr6.webm"></video>
Технически это все что вам нужно. Но подобно тегу <img> вы должны всегда включать атрибуты width и height в тег <video>. Атрибуты width и height могут совпадать с максимальной шириной и высотой, которую вы указали во время процесса кодирования. Не беспокойтесь, если одна из сторон видео немного меньше указанных значений, ваш браузер центрирует видео внутри прямоугольника заданного тегом <video>. Пропорции видео никогда не будут искажены.
<video src="pr6.webm" width="320" height="240"></video>
По умолчанию для элемента <video> не добавляются кнопки управления. Вы можете создать собственные элементы управления со старым добрым HTML, CSS, и JavaScript. Для <video> действуют такие методы как play() и pause (), а также свойство currentTime. Есть также свойства volume и muted. Так что вы имеете все необходимое для создания своего собственного интерфейса.
Если вы не желаете создавать свой интерфейс, то можете сказать браузеру вывести встроенные элементы управления. Для этого просто включите атрибут controls в тег <video>.
<video src="pr6.webm" width="320" height="240" controls></video>
Есть еще два дополнительных атрибута о которых я хотел бы упомянуть, прежде чем мы пойдем дальше: preload и autoplay. Не стреляйте в посланника, позвольте мне вначале объяснить, почему они полезны. Атрибут preload сообщает браузеру, что вы хотели бы начать загрузку видеофайлов как только страница загрузится. Это имеет смысл, если страница предназначена для просмотра важного видео. С другой стороны, если это просто дополнительный материал, то лишь немногие посетители будут его смотреть, тогда вы можете установить preload как none, чтобы сказать браузеру снизить сетевой трафик.
Вот пример видео, которое начинает загрузку (но не воспроизведение), как только загрузится страница.
<video src="pr6.webm" width="320" height="240" preload></video>
А вот пример видео, которое не будет загружаться при загрузке страницы.
<video src="pr6.webm" width="320" height="240" preload="none"></video>
Атрибут autoplay делает именно то, как и звучит: говорит браузеру, что вы хотели бы начать загрузку видеофайла при загрузке страницы, и желаете воспроизвести видео автоматически при возможности. Некоторые люди любят это, другие ненавидят. Но позвольте мне объяснить, почему этот атрибут важен в HTML5. Отдельные люди хотят, чтобы их видео воспроизводилось автоматически, даже если это раздражает их посетителей. Если HTML5 не определяет стандартный способ автоматического воспроизведения видео, люди начнут прибегать к JavaScript, чтобы сделать это в любом случае. Например, вызывать метод play() пока загружаются события окна. Посетителям было бы гораздо труднее противодействовать этому. С другой стороны, это упрощает добавление в расширение браузера (или написать свое при необходимости) выражения «игнорировать атрибут autoplay, я не желаю воспроизводить видео автоматически».
Вот пример видео, которое начнет загружаться и играть сразу же после загрузки страницы.
<video src="pr6.webm" width="320" height="240" autoplay></video>
А вот скрипт Greasemonkey, который можно установить в вашей локальной копии Firefox для предотвращения автоматического воспроизведения HTML5-видео. Он использует DOM-атрибут autoplay определенный в HTML5 и эквивалентный атрибуту autoplay в коде HTML.
var arVideos = document.getElementsByTagName('video');
for (var i = arVideos.length - 1; i >= 0; i--) {
var elmVideo = arVideos[i];
elmVideo.autoplay = false;
}
Но подождите секунду... Если вы следовали этой главе, то у вас есть не один видеофайл, а три. Один это OGV-файл, второй MP4- файл, третий WebM-файл. HTML5 обеспечивает способ сделать ссылки на все три файла с помощью элемента <source>. Каждый элемент <video> может содержать более одного тега <source>. Ваш браузер пройдется по списку источников видео по порядку и выберет первым то, что он в состоянии воспроизвести.
Возникает другой вопрос: как браузер узнает, какое видео он сможет воспроизвести? Ну, в худшем случае он загружает каждое видео и пытается его сыграть, однако это большая трата пропускной способности. Вы сэкономите много трафика, если сообщите браузеру информацию о каждом видео. Это можно сделать атрибутом type тега <source>.
<video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
Давайте разберем это сверху вниз. Элемент <video> определяет ширину и высоту видео, но не ссылку на видеофайл. Внутри <video> три элемента <source>. Каждый элемент <source> ссылается на отдельный видеофайл (с атрибутом src), а также дает информацию о видеоформате (в атрибуте type).
Тип атрибута выглядит сложным, адски сложным. Это комбинация из трех блоков информации: формат файла, видеокодек и аудиокодек. Давайте начнем с самого последнего. Для видеофайла .ogv формат контейнера это Ogg, представленный здесь как video/ogg, строго говоря, это MIME-тип для видеофайлов Ogg. Видеокодек Theora и аудиокодек Vorbis. Это достаточно просто, кроме формата значение атрибута, он немного странный. Само значение должно быть заключено в кавычки, поэтому вы должны использовать различные виды кавычек, чтобы окружить значение целиком.
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
С WebM почти так же, но с другим MIME-типом (video/webm вместо video/ogg) и другим видеокодеком (vp8 вместо theora) написанным в параметре codecs.
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
Видео H.264 является более сложным. Помните, я говорил, что видео H.264 и аудио AAC может быть в разных «профилях»? Мы кодируем H.264 с помощью «базового» профиля и AAC с профилем «низкая сложность» и все это внутри контейнера MPEG-4. Вся информация, включенная в атрибут type.
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
Преимуществом всех этих сложностей является то, что браузер проверяет атрибут type первым и смотрит, может ли он воспроизвести видеофайл. Если браузер решает, что он не может этого сделать, то не будет скачивать файл даже частично. Вы сэкономите на пропускной способности, а ваши посетители увидят видео, за которым они пришли, быстрее.
Если вы будете следовать инструкциям этой главы при кодировании видео, то можете просто скопировать и вставить значения атрибута type из примеров. В противном случае, вам нужно выработать параметры type для себя.
Выдержка из статьи Влада Мержевича
Полный текст статьи можете прочитать по ссылке: http://htmlbook.ru/html5/video