ММТВО и Веб-дизайн. 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...

Веб-дизайн: создание клиентского теста. UPD

Для более ясного понимания того, что надо сделать в задании по созданию клиентского теста, привожу небольшую примерную блок-схему реализации данной задачи.

В блоках справа приведены отрывки кода, которые рекомендуется использовать для решения подзадач. 

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

ММТвО::исследование форматов (часть 1)

Начнем разбираться для начала с форматами мультимемедиа.

1. Формат статической растровой графики без сжатия: BMP

2. "Неисчерпаемый GIF"

3. SVG

4. SMIL

5. OMS

UPD: статья на Хабре про новый графический формат.

Работа с оболочками в онлайне (ММТвО, ВД)

Для выполнения многих заданий удобно пользоваться онлайн-оболочкой. Там можно набирать код и тестировать его.
Укороченные ссылки для двух оболочек:

path.to/-h	для XHTML + CSS
path.to/-j	для Javascript

ММТвО::вставка видеоролика

Более подробно

Научимся перекодировать видео в формат FLV и вставлять ролик в страницу с помощью какого-либо видеоплеера на основе Flash.

NB: чуть позже на лабораторных работах будет рассмотрен другой способ, в рамках HTML5.

Здесь показан весь процесс на примере Google Sites.

Здесь есть простенький пример плеера и ролика.

Задача: вырезать фрагмент из любимого фильма или клипа и вставить в свой блог или гугл-сайт или собственный сайт. Бонус-балл за вставку субтитров со своей фамилией и именем.

Веб-дизайн: создание клиентского теста

NB: впоследствии мы реализуем создание более безопасного варианта с помощью серверной стороны (PHP+XML / MySQL)
NB2: в примерах используется объект XMLHTTPRequest, который является основой AJAX; впоследствии мы более подробно изучим этот вопрос.
NB3: загрузите и читайте лучшую на данный момент книгу о Javascript

UPD: см. пост NickJhuckov со схемой алгоритма создания теста.

Задачи клиентской стороны:

• считать информацию о вопросах и правильных ответах, используя объект XMLHTTPRequest;
• построить интерфейс (инпуты, селекты и т.д.), используя методы DOM (такие как createElement, setAttribute, appendChild).
• проверить ответы и выдать результат.

Реализуем это двумя способами:

1. храня данные в текстовом файле в виде многомерного массива (JSON);
2. делая то же самое в файле XML.

Способ I.
1. Разберемся с ассоциативными массивами и JSON
2. Подготовим файл с вопросами
3. Построим работающий пример (второй вариант)
4. Создадим собственное приложение с собственными вопросами и усовершенствованием - таймером, автоматически проверяющим ответы через 2 минуты после построения интерфейса и поместим ссылку в свой блог


Способ II.
1. Вспомним, как устроены файлы XML и построим файл вопросов
2. Напишем сценарий, весьма похожий на использованный в способе 1 (ссылка здесь появится чуть позже)
3. Все как в п.4 предыдущего способа.

(см. первые 13 строк сценария для построения XML-интерфейса)

Обновление страницы дисциплины "Веб-дизайн"

На странице дисциплины "Веб-дизайн" path.to/wd1 обновлен (и будет обновляться далее) список ссылок и заданий.

Предварительный список продуктов для аттестации по завершении курса см. здесь: goo.gl/gAGv

В частности, обновлены данные по созданию теста с использованием PHP - задание одновременно по двум дисциплинам, "Веб-дизайн" и "Дистанционные технологии в образовании"