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 — это адрес до самого видео файла.