Практическая работа № 30
«Вставка звука и видео в документ»

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, и с какими форматами он умеет работать.

Ответ: