Практическая работа. Вставка звука и видео в документ

Практическая работа

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

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

Ответ: