Ответ
Видео в HTML5 для начинающих Опции темы
Старый 23.02.2013, 01:14
  #1
0pium
 
Аватар для 0pium
Регистрация: 04.01.2012
Сообщений: 600

Видео в HTML5 для начинающих






До недавнего времени, при добавлении видеороликов в контент страницы, разработчики зависели от плагинов вроде Adobe Flash или Microsoft Silverlight. Несмотря на то, что эти плагины справляются с задачей, сам подход, предполагающий использование отдельных плагинов для работы с такими вещами, как видео имеет множество недостатков.

Почему браузеры сами не могут воспроизводить видео? Когда в 2005 году был основан YouTube, о поддержке видео в браузерах не было и речи, но сегодня у нас есть решение и оно называется HTML5.

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

Форматы видео

Нашей первой остановкой на пути к встроенному видео станут форматы. Браузеры поддерживают три основных формата видео. Это WebM, MP4 и OGV. Как видно из таблицы ниже, не существует одного формата, который бы поддерживался всеми основными браузерами.





Если вы хотите быть уверенными в том, что пользователи смогут посмотреть ваши видеоролики, лучше использовать два формата: WebM и MP4. Чуть ниже мы расскажем, как указывать несколько форматов файлов.

Примечание: Для преобразования видеороликов в различные веб-форматы отлично подойдет Firefogg.

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

Элемент <video>

Для того, чтобы встроить видеоролики в страницы своего сайта, вам понадобится новый элемент <video>. Браузеры, поддерживающие видео в HTML5, попытаются загрузить видео по тому пути, который вы укажете в атрибуте src. Так же, как они загружают изображения из элемента <img>. Вы можете указать атрибуты height и width, для того, чтобы установить размеры видео. Обратите внимание на то, что, в отличие от элемента <img>, элементу <video> требуется закрывающий тег.

<video src="my-video.webm" width="400" height="200"></video>

Данный простой пример показывает элемент <video>, указывающий на один файл. Однако, как вы уже знаете, чтобы обеспечить поддержку всех браузеров, нам нужно использовать файлы нескольких форматов. Чтобы предоставить браузеру несколько версий видеоролика, нужно использовать элементы <source>. Каждый из них помещается внутрь элемента <video> и содержит путь к файлу (в атрибуте src) вместе с его форматом, указанным в атрибуте type.

<source src="my-video.webm" type="video/webm">

Когда браузер обнаруживает элемент <video> с несколькими источниками, он выберет первый файл, который может воспроизвести, игнорируя остальные. Вы так же можете добавить в самый низ элемента <video> резервный контент. Этот контент будет отображаться, если браузер пользователя не поддерживает HTML5.

Примечание: Если браузер пользователя поддерживает HTML5, но не может воспроизвести ни один из предоставленных файлов, он не покажет резервный контент.

В примере ниже я использовал несколько элементов <source>,чтобы дать браузеру несколько форматов видео на выбор. В резервном контенте я просто дал ссылку на видеоролик. Вы можете вставить туда код, использующий для воспроизведения плагины, например, Flash.

Ваш браузер не поддерживает HTML5. Чтобы посмотреть видео, скачайте его.

Примечание: Не забудьте убрать атрибут src из тега <video>, если вставляете в него элементы <source>.

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

Атрибуты видео

В этом разделе вы познакомитесь с несколькими атрибутами, которые можно добавить в элемент <video>, чтобы контролировать встроенную в браузер функциональность.

controls

Атрибут controls заставляет браузер отобразить стандартную панель управления воспроизведением видео (как показано на рисунке ниже). По умолчанию браузер не покажет пользователю никаких кнопок. Стоит отметить, что дизайн этой панели управления не стандартизован и различается в зависимости от того, каким браузером вы пользуетесь.

<video src="my-video.webm" width="400" height="200" controls></video>





- Стандартная панель управления в Google Chrome.

loop

После добавления атрибута loop в элемент <video>, браузер будет автоматически воспроизводить видео с начала, посте того, как оно закончится.

<video src="my-video.webm" width="400" height="200" loop></video>

poster

Атрибут poster указывает путь к изображению, которое отображается на месте видео, пока пользователь не начнет его смотреть. Это может быть рекламная картинка, или кадр из ролика, привлекающий внимание посетителей. Если вы не укажете атрибут poster, браузер покажет на месте элемента <video> чёрный прямоугольник. Некоторые браузеры могут использовать первый кадр ролика, но полагаться на такое поведение нельзя.

<video src="my-video.webm" width="400" height="200" poster="featured-frame.png"></video>

muted

Добавление атрибута muted, отключит звук в видеоролике после загрузки страницы.

<video src="my-video.webm" width="400" height="200" muted></video>

autoplay

Атрибут autoplay запустит воспроизведение видео сразу после окончания загрузки страницы. Хотя в некоторых случаях этот атрибут бывает полезен, не злоупотребляйте им! Автоматическое воспроизведение роликов раздражает и отвлекает пользователей. Особенно если в нем есть звук. Если вам обязательно нужно использовать атрибут autoplay, добавьте к нему muted, чтобы уменьшить недовольство посетителей.

<video src="my-video.webm" width="400" height="200" autoplay muted></video>

Примечание: Существует API, позволяющее контролировать воспроизведение видео с помощью JavaScript. Его использование выходит за рамки этого поста, но если вам интересно, почитайте это руководство в Mozilla Developer Network.

Заключительные мысли

Видео в HTML5 обещает избавить от головной боли разработчиков, которым нужен надёжный инструмент для встраивания роликов на страницы. Несмотря на то, что HTML5 появился относительно недавно, браузеры быстро к нему адаптировались. Все основные браузеры в той или иной форме поддерживают элемент <video>. Если у вас всё ещё есть посетители, пользующиеся старыми версиями Internet Explorer, стоит добавить резервный код для воспроизведения видеороликов через Flash. В любом случае, сегодня можно уже без всяких опасений использовать HTML5 видео.

Пользуетесь видео на HTML5 в своих проектах? Расскажите об этом в комментариях.

Полезные ссылки

Управление воспроизведением видео (MDN)
Поддержка WebM в браузерах
Поддержка MP4 в браузерах
Поддержка OGV в браузерах

Источник
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 23.02.2013, 01:44
  #2
Ребиллер
 
Регистрация: 01.01.2012
Сообщений: 423

Вот это новость, надо попробовать обязательно. давно мечтал чтоб видео обрабатывалось как простая картинка, а тут такой сюрприз!
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 23.02.2013, 01:54
  #3
miraida
 
Аватар для miraida
Регистрация: 11.02.2012
Сообщений: 2,241

Сыровато, но интересно. Думаю очень скоро кроссбраузерность будет на все форматы - просто вопрос времени. Задача остается где его хранить это видео, на собственном хосте обычно не так уж много места, пару рекламок вставить можно, а если поболе надо?


А так тег не канает?
<video src="" />
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 23.02.2013, 03:40
  #4
0pium
 
Аватар для 0pium
Регистрация: 04.01.2012
Сообщений: 600

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

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Партнерка для онлайн видео zazik Партнёрки 0 20.02.2013 22:52
История HTML5 (инфографика) stomatolog Хостинг 1 28.01.2013 22:07
Как прикрутить видео с ютуб? Alsu О форуме 2 16.08.2012 10:48
Делаем скрины к видео удаленно Tolyger Файлообмен 12 02.03.2012 03:38

Метки
adobe flash, firefogg, flash, html5, javascript, microsoft silverlight, youtube


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 15:15. Часовой пояс GMT +3.