Размещение видео на веб-странице
Интернет является еще одним носителем для размещения фильмов, но в отношении него следует учесть несколько моментов. Короткое трехминутное видео может занимать 60 Мбайт дискового пространства, и для его загрузки из Интернета потребуется несколько часов. Однако при разумных размерах файлов зрители смогут загружать ваши фильмы из Интернета. Создание видео для Интернета требует корректного использования формата видео и сжатия для создания обладающих хорошим качеством, но при этом небольших видеофайлов.
После создания фильма, который подходит для размещения в Интернете, VideoStudio может помочь с кодированием HTML-документа.
Чтобы экспортировать видео на веб-страницу: 1. Выберите видеоклип в библиотеке. 2. Щелкните Вывести видеофайл на другой носитель и выберите веб-страница. 3. Отобразится запрос на использование элемента управления Microsoft ActiveMovie.
ActiveMovie является небольшим модулем, встраиваемым в Интернет-обозреватель (IE 4.0 и выше), который должны установить зрители. При выборе Нет, страница будет создана с простой ссылкой на фильм. 4. Введите имя и расположение нового HTML-файла. 5. Щелкните OK.
Откроется обозреватель, установленный по умолчанию, и отобразится выбранная страница. При загрузке данной страницы на веб-сервер необходимо поменять одну строку кода для обновления относительных ссылок на файл фильма.
Основы работы с видео и звуком
В спецификации HTML5 предусмотрено два тега для работы с аудио и видео соответственно: <audio> и <video>. Данные теги являются компонентами собственной среды браузера. Это означает, что не используется никаких сторонних средств для воспроизведения мультимедиа информации, что, во-первых, повышает безопасность, во-вторых, за счет более тесной интеграции, позволяет обходиться меньшим количеством аппаратных ресурсов для воспроизведения мультимедиа, и, в-третьих, позволяет избежать ряда проблем отображения информации (визуальное пересечение с остальным контентом). Помимо этого, использование <audio> и <video> позволяет организовать управление из веб-сценариев. Также существуют и недостатки указанных тегов, спецификация HTML5 поддерживает далеко не все кодеки, строго говоря, из спецификации исключены все упоминания об обязательной поддержке каких-либо кодеков. Частичным решением проблемы кодеков может служить использование элемента <source>, позволяющий объявить несколько источников мультимедиа, из которых браузером выберет наиболее подходящий. Пример:
<audio> <source src="sound1.ogg"> <source src="sound1.mp3"> </audio>
Вставка аудио и видеороликов
Как уже давно можно было догадаться, для вставки аудиоролика в HTML5 используется парный тег <audio>. Текст, помещающийся внутри данного тега будет отображаться в браузерах, не поддерживающих <audio>. Базовый код для вставки аудио предельно прост:
<audio src="sound1.mp3"> </audio>
Или, для обеспечения универсального воспроизведения различными браузерами:
<audio> <source src="sound1.ogg"> <source src="sound1.mp3"> </audio>
Тег <audio> содержит следующие атрибуты: autoplay – при его добавлении, воспроизведение файла начинается сразу же после загрузки страницы; controls – добавляет панель управления к аудио; loop – воспроизведение аудио повторяется с начала, после его завершения; preload – используется для загрузки файла вместе с загрузкой самой страницы, игнорируется, если использован autoplay; src – задает путь к файлу для воспроизведения.
Пример:
<audio autoplay controls src="1.mp3"> Тег <audio> не поддерживается </audio>
Результат:
Рис. 4.1. Результат добавления тега <audio> в случае, если браузер не поддерживает указанный тег
Рис. 4.2. Результат добавления тега <audio> в случае, если тег поддерживается
Видео добавляется аналогичным образом:
<video src="video1.avi"> </video>
Атрибуты тега <video>: autoplay – при его добавлении, воспроизведение файла начинается сразу же после загрузки страницы; controls – добавляет панель управления к видео; height – задает высоту области, для воспроизведения видео. loop – воспроизведение аудио повторяется с начала, после его завершения; poster – указывает путь к изображению, пока видео не воспроизводится, или недоступно; preload – используется для загрузки видеофайла вместе с загрузкой самой страницы, игнорируется, если использован autoplay; src – задает путь к файлу для воспроизведения. width – задает ширину области, для воспроизведения видео.