Задание 4. Вставка звука и видео в документ

1. Скопируйте на свой компьютер каталог MEDIA. Откройте файл media.htm в редакторе. Ваша задача – научиться добавлять на веб-страницу звуковые файлы, флэш-анимацию и видеоролики. Для этого нужно использовать мультимедийные данные из подкаталогов audio, flash и video. Места вставки медиафайлов вы легко определите из текста файла media.htm.

2. Добавьте на веб-страницу звуковой файл hcopter.wav из каталога audio (шум вертолёта). Используйте тэг embed, отключите автозапуск проигрывания, установите ширину проигрывателя 300 пикселей и высоту 20 пикселей.

3. Добавьте на веб-страницу звуковой файл nature.mp3 из каталога audio (звуки природы). Используйте тэг embed, укажите те же атрибуты, что и в предыдущем случае.

4. Добавьте на веб-страницу звуковой файл nature.ogg из каталога audio (звуки природы). Используйте тэг audio, укажите его атрибуты:

src="адрес файла" ссылка на файл-источник

controls="controls" показывать элементы управления

width="300" ширина проигрывателя в пикселях

height="20" высота проигрывателя в пикселях

Откройте веб-страницу в браузере и выясните, поддерживает ли ваш браузер тэг audio.

5. С помощью тэге embed добавьте на страницу флэш-ролик cube.swf (вращающийся кубик) из каталога flash. Установите размеры 257 на 200 пикселей.

6. С помощью тэге embed добавьте на страницу флэш-ролик lightbot.swf (игра Lightbot) из каталога flash. Установите размеры 640 на 480 пикселей. Откройте веб-страницу в браузере и посмотрите, как работает флэш-анимация.

7. Зайдите на сервис youtube.com, с помощью поиска по сайту найдите ролик по теме «HTML5» и вставьте на веб-страницу. Для этого нужно щелкнуть по кнопке Поделиться под роликом, затем – по строчке HTML-код. После этого остается просто скопировать код, появившийся в текстовом окне, на веб-страницу.

8. С помощью тэга video добавьте на страницу видеофайл finish.mp4 из каталога video следующим образом:

<video width="ширина" height="высота" controls="controls">

<source src="адрес файла"

type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

</video>

Установите размеры окна 320 на 240 пикселей.

9. С помощью тэга video добавьте видеофайл finish.webm из каталога video следующим образом:

<video width="ширина" height="высота" controls="controls">

<source src="адрес файла"

type='video/webm; codecs="vp8, vorbis"'>

</video>

Установите размеры окна 320 на 240 пикселей.

10. Обновите страницу в браузере и выясните, поддерживает ли ваш браузер тэг video, и с какими форматами он умеет работать.