HTML
Медиа-элементы
Поиск…
параметры
| атрибут | подробности |
|---|---|
| ширина | Устанавливает ширину элемента в пикселях. |
| рост | Устанавливает высоту элемента в пикселях. |
<source> | Определяет ресурсы аудио- или видеофайлов |
| трек | Определяет текстовую дорожку для элементов мультимедиа |
| управления | Отображает элементы управления |
| Автовоспроизведение | Автоматическое воспроизведение медиафайлов |
| петля | Воспроизведение носителя в повторяющемся цикле |
| приглушенный | Воспроизводит медиа без звука |
| плакат | Назначает изображение для отображения до загрузки видео |
замечания
Поддержка в браузерах
| Особенность | Хром | Firefox (Gecko) | Internet Explorer | опера | Сафари |
|---|---|---|---|---|---|
| Базовая поддержка | 3.0 | 3,5 (1,9,1) | 9,0 | 10,50 | 3,1 |
<audio> : PCM в WAVE | (Да) | 3,5 (1,9,1) | Никакой поддержки | 10,50 | 3,1 |
<audio> : Vorbis в WebM | (Да) | 4.0 (2.0) | Никакой поддержки | 10,60 | 3,1 |
<audio> : Streaming Vorbis / Opus в WebM через MSE | ? | 36,0 | ? | ? | ? |
<audio> : Vorbis в Ogg | (Да) | 3,5 (1,9,1) | Никакой поддержки | 10,50 | Никакой поддержки |
<audio> : MP3 | (Да) | (Да) | 9,0 | (Да) | 3,1 |
<audio> : MP3 в MP4 | ? | ? | ? | ? | (Да) |
<audio> : AAC в MP4 | (Да) | (Да) | 9,0 | (Да) | 3,1 |
<audio> : Opus в Ogg | 27,0 | 15,0 (15,0) | ? | ? | ? |
<video> : VP8 и Vorbis в WebM | 6,0 | 4.0 (2.0) | 9,0 | 10,60 | 3,1 |
<video> : VP9 и Opus в WebM | 29,0 | 28,0 (28,0) | ? | (Да) | ? |
<video> : Потоковая передача WebM через MSE | ? | 42,0 (42,0) | ? | ? | ? |
<video> : Theora и Vorbis в Ogg | (Да) | 3,5 (1,9,1) | Никакой поддержки | 10,50 | Никакой поддержки |
<video> : H.264 и MP3 в MP4 | (Да) | (Да) | 9,0 | (Да) | (Да) |
<video> : H.264 и AAC в MP4 | (Да) | (Да) | 9,0 | (Да) | 3,1 |
| любой другой формат | Никакой поддержки | Никакой поддержки | Никакой поддержки | Никакой поддержки | 3,1 |
Используя `
Используйте HTML или <audio> элемент для встраивания видео / аудио контента в документ. Элемент video / audio содержит один или несколько источников видео / аудио. Чтобы указать источник, используйте либо атрибут src, либо элемент <source> ; браузер выберет наиболее подходящий.
Пример аудио-тега:
<!-- Simple video example -->
<video src="videofile.webm" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.webm">download it</a>
and watch it with your favorite video player!
</video>
<!-- Video with subtitles -->
<video src="foo.webm">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>
<!-- Simple video example -->
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
Your browser doesn't support HTML5 video tag.
</video>
Пример аудио-тега:
<!-- Simple audio playback -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
аудио
HTML5 предоставляет новый стандарт для встраивания аудиофайла на веб-страницу.
Вы можете вставить аудиофайл на страницу с помощью элемента <audio> :
<audio controls>
<source src="file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
видео
Вы можете вставить также видео на веб-страницу с помощью элемента <video> :
<video width="500" height="700" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Заголовок видео или фон
Добавление видео, которое будет автоматически запускаться в цикле и не имеет элементов управления или звука. Идеально подходит для видео-заголовка или фона.
<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
</video>
Этот CSS обеспечивает резервную копию, если видео нельзя загрузить. Обратите внимание, что рекомендуется использовать первый кадр видео в качестве плаката video.jpg.
#videobg {
background: url(video.jpg) no-repeat;
background-size: cover;
}
Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow