ММТВО и Веб-дизайн. HTML5 | Вставка видео. Часть 2

После того, как html5-видео будет успешно интегрировано в страницу. Можно приступать в выполнению данной лабораторной работы. В ней будет разбираться взаимодействие с элементами на странице с помощью JS и CSS. По следующим ниже ссылкам представлены варианты для браузеров Safari и Firefox.

http://nickjukov.com/html5/ff-1/
http://nickjukov.com/html5/ff-2/index.xhtml

http://nickjukov.com/html5/safari-1/
http://nickjukov.com/html5/safari-2/

Задание
Встройте в существующую html5 страничку (или создайте новую) элементы для управления созданием различных эффектов с видеороликом или с любыми графическими элементами.

Полезные ссылки, использованные для подготовки лабораторной работы.

1. http://developer.apple.com/safaridemos/
2. http://www.html5video.org/demos/ 
3. http://people.mozilla.com/~prouget/demos/mashup/video.xhtml
4. https://developer.mozilla.org/En/CSS/Using_CSS_transforms

ММТВО и Веб-дизайн. HTML5 | Вставка видео

Задание: выбрать, конвертировать видео и вставить на страницу, используя стандарт HTML5. Протестировать корректное воспроизведение в различных браузерах.

Для того, чтобы вставить видео на страницу по стандарту HTML5 необходимо использовать следующую структуру:

<video autoplay="autoplay" loop="loop" controls="controls" 

autobuffer="autobuffer">

<source src="*.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
 <source src="*.ogv" type='video/ogg; codecs="theora, vorbis"' />
 <source src="*.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

Для конвертирования видео рекомендуется использовать программу Miro Converter (есть реализация для Windows и MacOS X). Можно также использовать программу Hamster Free Video Converter.

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

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Полезные ссылки по этой теме:

• http://nickjukov.com/html5/ (мой пример реализации);
• http://www.apple.com/html5/showcase/video/ (реализация вставки html5 video в браузере Safari) (открывать в Safari);
• страница для разработчиков http://developer.apple.com/safaridemos/ (Safari);
• отличный сайт с кучей ссылок о html5 video http://www.html5video.org/demos/;
• спецификация по стандарту http://www.w3.org/TR/html5/video.html#video;
• еще один отличный сайт про вставку видео на страницу.

Приветствуются желающие добавить любые дополнительные функции (наложение маски, добавление перспективы и т.д.) к вставленному видео.

Данная лабораторная работа не последняя в серии занятий, посвященных HTML5. 

To be continued...