«

»

Апр 19

Распечатать Запись

HTML5 и Мультимедиа. Все намного проще чем кажется

HTML5В данной статье попробуем прояснить, что же такое HTML5 и как он связан с мультимедиа. В предыдущей своей статье я подробнее говорил о том, что такое HTML. Сегодня же речь пойдет больше о HTML5 – новой версии HTML.

И так, начнем!

 HTML5 – это пятая и новая, на сегодняшний день, версия HTML стандарта и языка разметки. Главная цель данного стандарта — улучшение языка разметки, для работы с новыми мультимедийными элементами и приложениями. Также в HTML5 сохраняется удобная читаемость программ для человека и обработки для web-браузеров. HTML5 также включает в себя HTML4 и язык JavaScript.

Некоторые интересные возможности HTML5:

  • Появились новые элементы кода, такие как <video>, <audio> и др.
  • Существует возможность рисования на web-страницах различных объектов с использованием <canvas>.
  • Присутствуют элементы <footer>, <header>, <nav>, <article>, которые делают web-страницы более понятными для поисковых систем.

 Немного о HTML4.

Для того чтобы в предыдущей версии HTML (HTML 4), вывести на web-страницу видео или аудио нужно было использовать какой-либо сторонний плагин, который встраивался в HTML код с помощью специальных тегов. В HTML 4 возможно использовать три различных элемента для встраивания мультимедиа.

• <applet>
• <embed>
• <object>

 Например, мультимедийными плагинами могут служить следующие элементы:

  • Flash player плагин,
  • VLC player плагин,
  • QuickTime player плагин.

 Поэтому, часто для того чтобы пользователь мог увидеть мультимедийный видео файл на каком-то сайте, ему необходимо установить дополнительный плагин, что не всегда очень удобно так как требует дополнительного времени, а порой и знаний. Наиболее распространенный и повсеместно используемый плагин, на сегодняшний день – это Flash player. На мой взгляд у Flash плеера есть один небольшой недостаток — он иногда притормаживает работу браузера.

Продолжаем про HTML5

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

Подведем итоги. Преимущества HTML5.

• Больше нет необходимости в плагинах, браузер включает в себя все необходимое, используя HTML5.

• Предполагается, что скорость работы значительно быстрее, так как все задачи выполняются на уровне браузера и не задействуются внешние элементы — плагины.

 Кстати HTML5 все еще находится в стадии разработки. Но уже на сегодняшний день его частично поддерживают все современные браузеры новых версий, такие как — Internet Explorer, Opera, Firefox, Chrome, Safari.

HTML5 на практике.

 Теперь давайте разберемся, как можно легко и просто встроить видео на web-страницу с использованием языка HTML5.

1. Сначала создадим файл, например html5video.html

2. Поместим в этот файл следующие строчки языка HTML5:

<html>
<body><center>
<p>HTML5 Видео пример</p>
<video src=» http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 » width=»640″ height=»360″ controls=»controls»></video>
</body>
</html>

 Теперь я помещаю этот файл на свой web-сервер, а вы можете разместить на своем, если он у вас есть. Если нет, ничего страшного.  Далее вы cможете загрузить эту страницу, в вашем браузере, с моего сервера по адресу http://itmultimedia.ru/myexamples/html5video.html или нажав на HTML5Video. Вы должны увидеть плеер с видео файлом. Получается мы использовали HTML5 для встраивания мультимедиа файла с использованием элемента <video>, где src — это адрес до самого видео файла.

Поделиться в соц. сетях

Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Постоянная ссылка на это сообщение: http://itmultimedia.ru/html5-i-multimedia/

Комментарии:

5 комментариев

  1. Евгений

    Отлично!
    Получается плеер уже встроен в браузер, то есть он не подкачивается с веб-сервера, как flash плеер. А у разных браузеров отличаются плееры? Есть ли возможность разворачивать видео на полный экран? И уточни, плиз, с каких версий разных браузеров это работает, потому что у меня только в Chrome нормально отображается твое видео. И какие типы видео файлов он переваривает?
    Спасибо за инфо!

  2. Анатолий

    Евгений, постараюсь ответить на вопросы.

    1. Да плеер уже встроен в браузеры. Элемент video, языка HTML5 предоставляет достаточный набор функций (кнопка play, stop и др.) для управления показом видео. Для того чтобы была видна панель управления проигрыванием, необходимо просто указать атрибут controls в коде. Также стандартный плеер в разных браузерах выглядит различно. Чтобы узнать, как выглядит плеер, в том или ином браузере, можно загрузить, созданную нами страницу в нескольких браузерах и сравнить. Также посмотреть какие форматы поддерживает ваш браузер можно пройдя по ссылке Video Format Support

    2. Поддержку HTML5 видео имеют следующие браузеры: Internet Explorer 9+, Opera 10.50+, Firefox 3.5+, Chrome 3.0+, Safari 3.1+.

    3. Можно создать свой собственный плеер, используя для этого JavaScript и CSS. Также на сегодняшний день существует много готовых решений (мультимедиа плееров) использующих HTML5. Например, неплохая подборка есть тут. Также все представленные в подборке плееры могут использовать не только HTML5, но и подключать Flash плееры, когда это необходимо.

    4. Теперь касаемо кодеков. На практике, чаще всего используется MP4(h.264) для видео и mp3 для аудио (также для видео Theora Ogg и WebM). А вообще ситуация с кодеками намного сложнее. Разные браузеры порой поддерживают одни кодеки и не поддерживают другие, поэтому лучше выкладывать несколько файлов в разных форматах как для аудио так и для видео. Также выкладываю одну картинку про то, какие браузеры, какие форматы поддерживаю. Картинка взята из книги, которая называется «HTML5 Multimedia: Develop and Design», автор Ian Devlin, 2011 года издания. Также рекомендую эту книгу всем тем, кто хочет получить более подробную информацию о HTML5 и Мультимедиа.

    Браузеры и поддерживаемые видео форматы

  3. Aleksov

    Вот мой вариант HTML5 аудио / видео плеера с поддержкой воспроизведения потокового контента
    http://set-pro.net/scr/ptmedia/

  4. Анатолий

    Aleksov, спасибо! Посмотрю.

  5. Павел

    а как встроить html5 в шапку шаблона

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вы можете использовать эти теги HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>