Блог старого компьютера

Блог старого компьютера


Главная html & css Мультимедиа в html5

Мультимедиа в html5

12.03.2013 02:37 Администратор html & css
Печать PDF
Сегодня поговорим о действительно полезных тегах появившихся в html5. Это теги <audio> и <video>. Как ясно из их названия они отвечают за вставку видео и audio на страницу сайта. Некоторые уже сейчас говорят что эти теги лишние так как и раньше мы с легкостью вставляли мультимедиа файлы на страницы, мол, а эти теги еще и не являются кросбраузерными (хочу отметить что раньше не было возможности простой вставки, а была лишь вставка flash проигрывателя который и осуществлял проигрывание мультимедиа файла). В чем то они конечно и правы, а именно в разговорах о кросбраузерности. К счастью со временем этот вопрос решится сам собой, предпологать когда точно ничкто пока не может. 

Выглядит код html5 для вставки аудио следующим образом:

<audio controls>
<source src="/1.mp3" type="audio/mpeg">
<source src="/1.ogg" type='audio/ogg; codecs=vorbis'>
Тег audio не поддерживается вашим браузером. <a href="/1.mp3">Скачайте музыку</a>.
</audio>

 При первом же взгляде на код можно увидеть что если браузер не поддерживаент тег <audio> то нам предложат скачать файл и прослушать его на нашем компьютере, так что ни кто не останется обиженным в данном случае. Так же я думаю вы увидели что ауди файл можно прикреплять в разных форматах, это скорее всего сделано опять же с целью того если у человека нет кодека для одного файла то найдется для другого.

Теперь посмотрим как данная конструкция отображается на страницах основных браузеров.

Opera

 

Mozila Firefox

Google Chrome

Браузеры неподдерживающие тег (ie6)

Как видите каких то строгих рамок оформления нету, и каждый бюраузер отображает плейер html5 как хочет. Хочу отметить что в опере он отображается более стильно. Стилизовать так как мне надо данный элемент я не пробовал но подозреваю что это делается не просто, возможно я и ошибаюсь. Но если не будет возможности стилизовать данный html5 плейер то все по старинке для воспроизведения будут использовать свой flash плейер который подходит к их дизайну. Так же хочу отметить что музыка у меня заиграла только в браузере от Google (он поддерживает mp3). Видимо потому что другие браузеры не поддерживают тип файл mp3, а после того как я все же нашел на просторах интернета ogg файл то музыка зазвучала и в других браузерах. Ничего хорошего в этом нет так как в лучшем случае чтоб мызка играла нам придется загружать на хостинг 2 файла, а это не особо хорошо влияет на свободное пространство. Конечно можно написать php скрипт который на лету из mp3 сделает ogg, но как это будет работать в реальности неизвестно (скорее всего это создаст существенную нагрузку на хостинг) да и в итоге после всех этих плясок с бубном люди скорее всего выберут старый добрый способ с flash плейером.

Про тег <audio> поговорили, настало время поговорить о теге <video>

Html5 код для вставки видео выглядит так:

<video width="400" height="300" controls="controls" poster="video/duel.jpg">
<source src="/1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://people.xiph.org/~greg/video/ytcompare/bbb_theora_486kbit.ogv" type='video/ogg; codecs="theora, vorbis"'>
Тег video не поддерживается вашим браузером. <a href="/video/duel.mp4">Скачайте видео</a>.
</video>

 Отличий тут на самом деле не много, все по аналогии, только тот плейер html5 воспроизводил аудио, а этот видео.

Поглядим как смотрится плейер html5  в разных браузерах.

 

Opera

 

Mozila Firefox

Google Chrome

Браузеры неподдерживающие тег (ie6)

Вот так вот обостоят дела с html5 тегом video. Тут все вышло так же как и с прошлым тегом. mp4 у меня прочитал только браузер от google, остальные отказались читать, тогда пришлось найти видео в формате ogv, после чего видео заработало и вдругих браузерах. Как и в прошлом случае хочу сказать что это не очень удобно, приходится каждое видео конвертировать в ogv. Вот такой вот небольшой анонс мултимедийных html5 тегов.

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?