Вы здесь: Главная > HTML > Встроенный контент: видео, аудио и холст

Встроенный контент: видео, аудио и холст

Опубликовано автором Просмотры: 25

HTML5 вводит ряд новых тегов для соответствия всё более интерактивному и мультимедийному характеру Интернета. Хотя в прошлом существовало множество способов встраивания видео, аудио и динамических изображений, новый веб-стандарт пытается сделать это проще, последовательнее и надёжнее.

Самый простой встроенный (иностранный) контент — это изображение, применяемое к веб-странице с помощью элемента img.

В былые времена object, наряду с различными плагинами и фирменной devil dust, использовался для обработки видео и аудио в режиме реального времени. Хотя и не без проблем с совместимостью, в настоящее время существует гораздо лучший метод использования различных типов мультимедиа на веб-страницах.

Видео

<video src="kitties.mp4" controls></video>

Бац. Вот так. Просто вот так.

Это позволит встроить видео вместе с элементами управления в браузеры, которые поддерживают тег HTML5 video и тип видеоконтента.

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

На практике это означает, что вряд ли все посетители смогут ознакомиться с вашим видео (или аудио) файлом. Например, некоторые поддерживают видео в формате WebM, в то время как другие поддерживают MPEG. Однако не теряйте из-за этого слишком много сна — смотрите раздел “Альтернативный контент” ниже.

Атрибут controls необязателен, но если он вам не нужен, если вы действительно хотите отобрать управление у пользователя, вы можете просто добавить атрибут autoplay.

<video src="kitties.mp4" autoplay></video>

При этом видео будет воспроизводиться при загрузке страницы, не будет отображаться никаких элементов управления и, скорее всего, будет чертовски раздражать ваших посетителей. Конечно, вы могли бы, если бы были добры, добавить оба атрибута controls и autoplay.

Другие основные атрибуты, имеющиеся в вашем распоряжении, включают width, height, loop и muted.

<video src="kitties.mp4" width="300" height="200" loop muted autoplay controls></video>

Если вы настаиваете на использовании autoplay, приведение muted (и controls) на вечеринку также является приятным жестом и является соглашением, которое используют многие сайты.

Например, если у вас есть видео в aside, оно может начать воспроизводиться, но затем пользователь может выбрать следить за ним, отключив звук видео с помощью элементов управления, если захочет, уменьшая вероятность раздражения.

Плакат

Вы можете указать изображение-заполнитель, которое будет отображаться перед воспроизведением видео, с атрибутом poster.

<video src="kitties.mp4" poster="fluffy.jpg" controls></video>

Указанное изображение будет растягиваться или сжиматься в соответствии с размерами видео, независимо от исходного размера изображения.

Резервный контент

Резервный контент необходим, если браузер не понимает элемент video. Это может быть несколько слов, фрагмент HTML или “действительно забавное” и “очень оригинальное” изображение Lolcats.

<video src="kitties.mp4" controls>
    <img src="hahahaha.jpg" alt="Hilarious cat and caption saying 'soz'.">
</video>

Альтернативный контент

Как уже отмечалось, нам нужно беспокоиться не только о совместимости с тегом, но и о совместимости с самим исходным видео. К счастью, вместе с элементом source может быть предложено несколько исходных файлов видео вместе с указанием требований к файлу в значении атрибута type. Затем браузер выберет первый, который ему понравится.

<video controls>
    <source src="kitties.mp4" type="video/mp4; codecs='avc1, mp4a'">
    <source src="kitties.webm" type="video/webm; codecs='vp8.0, vorbis'">
    <p>Browser no likey HTML 5.</p>
</video>

Здесь браузер должен выяснить, может ли он обрабатывать MIME-тип “video / mp4” и есть ли у него указанный кодек для его расшифровки. Если этого не произойдёт, следует перейти к следующему и повторить попытку с деталями, изложенными во втором элементе source.

Аудио

Применение аудио аналогично применению видео. При использовании тега audio структура такая же, как при использовании video, а атрибуты src, controls, autoplay и loop могут использоваться одинаково.

<audio src="meow_mix.mp3" controls>
    Your stupid browser doesn't support HTML 5 audio.
</audio>

Альтернативный контент также может быть определён точно так же, как с помощью тегов video и source.

С помощью JavaScript можно осуществлять гораздо больший контроль над видео и аудио с возможностью более детального управления аспектами воспроизведения и пользовательскими элементами управления.

Холст

Важным дополнением к HTML5 является элемент canvas (холст). Он предназначен для предоставления холста, на котором с помощью JavaScript можно создавать всевозможные динамические изображения, такие как графики, анимированные спрайты или daft картинки с кошками.

<canvas id="wittykitty" width="800" height="450">
    <!-- Fall-back content here, just like with video and audio -->
</canvas>

Вот и всё. По крайней мере, таков объём фактического HTML-кода. Вся мощь кроется в написании сценариев.

Страницы в тему:

Добавить комментарий