Video тег: Атрибут autoplay | htmlbook.ru

HTML тег video

Тег <video> позволяет в браузере проигрывать видео файлы.

В настоящее время поддерживается три видео формата — MP4, WEBM, OGG.

• MP4 = h356 видео кодек + AAC аудио кодек
• WEBM = VP8 видео кодек + Vorbis аудио кодек
• OGG = Theora видео кодек + Vorbis аудио кодек

Любой текст между тегами <video> и </video> будет отображен в том случае, если тег <video> не поддерживается браузером.

MIME-типы для видео форматов

Разница между HTML 4.

Тег <video> был добавлен в HTML5.

Атрибуты тега <video>

Общие атрибуты

Тег <video> поддерживает общие атрибуты и атрибуты-события.

HTML пример использования

Проигрываем видео файл:

<video controls>
   <source src='movie.mp4' type="video/mp4">
   <source src='movie.ogg' type="video/ogg">
   Ваш браузер не поддерживает тег video.
</video>

Видео | HTML | CodeBasics

Как и с аудио, ещё недавно в HTML-разметку нельзя было «комфортно» вставить видео-файл. Начиная с HTML5 появился элемент <video>, который, как и <audio>, позволяет быстро добавить необходимое видео на страницу.

Тег <video> парный, в котором, при отсутствии вложенных тегов <source>, указывается путь к видео-файлу в атрибуте src. С помощью атрибута controls можно вывести элементы управления для проигрывателя. Визуальное оформление управляющих элементов зависит от конкретного браузера.

<video src="https://example.com/our-video.mp4" controls></video>

С помощью специальных тегов <source> возможно добавлять несколько форматов видео.

<video controls>
    <source src="https://example.com/our-video.mp4" type="video/mp4">
    <source src="https://example.com/our-video.webm" type="video/webm">
    <source src="https://example.com/our-video.ogg" type="video/ogg">
</video>

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

Тег <video> имеет несколько важных атрибутов:

• controls — Добавляет элементы управления для видеоплеера
• autoplay — Автоматическое воспроизведение после загрузки видео
• width — Ширина видеоплеера
• height — Высота видеоплеера

Атрибуты width и height принимают значения в пикселях, при этом указывать единицу измерения не нужно.

<video controls>
    <source src="https://example.com/our-video.mp4" type="video/mp4">
    <source src="https://example.com/our-video.webm" type="video/webm">
    <source src="https://example.com/our-video.ogg" type="video/ogg">
</video>

Задание

Добавьте видео в формате mp4 на страницу:

• Ссылка на видео: https://www.w3schools.com/html/movie.mp4
• У видеоплеера должны быть элементы управления
• Высота плеера: 240
• Ширина плеера: 320
• Путь к файлу укажите в теге <video>

На всякий случай сделайте звук потише, в видео есть звук 😉

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

• Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

• Если используется один файл, то достаточно добавить атрибут

  src для тега <video>. В остальных случаях используйте теги <source>

• Формат mp4 корректно обрабатывается большинством браузеров. По возможности используйте именно его

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Тег HTML

❮ Пред. Следующий ❯

Тег

Вы также можете включить альтернативный текст в тег

Для элемента

Файлы MP4/MPEG 4 используются с видеокодеком h364 и аудиокодеком AAC, файлы WebM — с видеокодеком VP8 и аудиокодеком Vorbis; и файлы Ogg — с видеокодеком Theora и аудиокодеком Vorbis.

Чтобы обеспечить управляемость видео- и/или аудиоконтентом, вы можете использовать различные события. Такие события позволяют отслеживать ход загрузки и воспроизведения мультимедиа, а также позицию и состояние воспроизведения.

Чтобы изменить положение видео в кадре элемента, вы можете использовать свойство CSS object-position. Если вы хотите контролировать, как изменяется размер видео, чтобы оно помещалось в кадр, используйте свойство object-fit.

Вы можете добавлять к видео субтитры/заголовки с помощью JavaScript с элементом и форматом WebVTT.

 

  <голова>
    
    <стиль>
      видео{
        ширина: 300 пикселей;
        высота: 200 пикселей;
        граница: 1px сплошная #666;
      }
    
  
  <тело>
    <управление видео отключено src="/build/videos/arcnet.io(7-sec).mp4">
      
    
    
Некоторая информация о видео
  
 

  

  <голова>
    
    <стиль>
      видео {
        ширина: 300 пикселей;
        высота: 220 пикселей;
        граница: 1px сплошная #666;
      }
    
  
  <тело>
    <управление видео>
       com/demos/sample-videos/small.ogv" type="video/ogg">
      
    
    
Некоторая информация о видео