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

Уроки и статьи по HTML5-видео

Лучший способ обучиться чему-либо в жизни – погрузиться в это и заняться практикой. Эта подборка статей и уроков напичкает ваш мозг нужной информацией и продемонстрирует вам пошагово весь процесс.

Video for Everybody! (Видео для каждого)

Хотите просто ознакомиться с резюме по встраиванию HTML5-видео? Этот практичный обзор от Camen Design представляет полный код, необходимый не только для встраивания видео с помощью элемента

HTML5-Видео от HTML5 Rocks

HTML5 Rocks – это фантастический сайт, помогающий разобраться со всеми новыми элементами и функциями HTML5. Раздел по HTML5-видео в частности описывает процесс встраивания видео с помощью тега

Add HTML5 Video to Your Site (Добавьте HTML5-видео на свой сайт)

Вадим Макеев из Opera показывает в статье для журнала «.net» способ встраивания HTML5-видео без использования плагинов. Кроме обзора того, как сделать запасной вариант с Flash-плеером, этот урок также раскрывает процесс разработки индивидуальных кнопок плеера с помощью Javascript.

Embed Videos In Your Web Pages Using HTML5 (Встраиваем видео в веб-страницы с помощью HTML5)

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

HTML5 Audio and Video: What you Must Know (HTML5 аудио и видео: Что вы должны знать)

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

Dive Into HTML5 – Video on the Web (Углубляемся в HTML5 – Видео в сети)

Глава 5 сайта «Dive Into HTML5» приводит расширенное описание кодеков и контейнеров видео-файлов, поддерживаемых различными браузерами, и перечисляет некоторые удобные инструменты, которые можно использовать для конвертации и кодирования видео-роликов, способных достучаться до каждого зрителя.

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

SublimeVideo

Video.js

MediaElement.js

Projekktor

HTML5Media

Легкий выход!

Если встраивание HTML5-видео кажется вам немного сложным, всегда есть вариант использовать один из множества сайтов видеохостинга. Два наиболее популярных – это YouTube и Vimeo. Оба эти сайта не только позволяют встраивать HD-видео с их собственными плеерами, но и берут на себя всю суету с размещением и подачей видеофайла.

0