Видео на HTML-странице. Как вставить и воспроизвести ролик с помощью элемента?

видео на html-странице. как вставить и воспроизвести ролик с помощью элемента?

Вставка и воспроизведение видео

Есть несколько способов добавления видео на страницу. Каждый из них обладает своими достоинствами и недостатками. В статье мы рассмотрим специальный элемент, появившийся с приходом пятой версии HTML. Возможности по работе с видеороликами, которые он предоставляет, отлично поддерживаются всеми видами браузеров кроме Opera mini.

Для вставки видео в разметку страницы используйте элемент <video>. Он требует наличия закрывающего тега. О том, что может располагаться между открывающим и закрывающим тегом мы расскажем далее в статье.

Чтобы появилась возможность воспроизвести видео, его расположение необходимо указать в атрибуте src. Путь должен быть относительным или абсолютным URL-адресом. Помимо этого нужно добавить атрибут controls. Он не требует какого-либо значения. Его присутствие говорит браузеру о необходимости вывести панель управления просмотром видео, которая включает в себя: индикатор изменения громкости, кнопки паузы и остановки воспроизведения, полосу прокрутки, а также открытие на полный экран.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример вставки видео в страницу</title>
    </head>
    <body>
        <h1>Воспроизведение с панелью управления</h1>
        <video src="test-video.mp4" controls></video>
    </body>
</html>
Пример отображения вставленного видео
рис 1. Внешний вид проигрывателя в Google Chrome

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

Изменение размера области просмотра

Элемент <video> поддерживает атрибуты width (ширина) и height (высота). Они явным образом определяют размеры, которые будет иметь область просмотра видео. Важно понимать, если вы не укажите конкретные размеры, то область просмотра займет все доступное пространство, но не больше реального размера видео.

В HTML значения атрибутов width и height можно задавать как в пикселях, так и в процентах. Если размеры заданы в процентах, то занимаемое пространство рассчитывается относительно родительского элемента. Выражение, в котором высота задана в процентах, а ширина в пикселях, может выглядеть следующим образом «<video src="test.mp4" height="40%" width="300px">».

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Изменение размера видео с помощью атрибута</title>
    </head>
    <body>
        <video src="test-video.mp4" width="300px" height="40%"></video>
    </body>
</html>

Вы можете указать только ширину или высоту. При этом второй атрибут вычислятся автоматически, исходя из сохранения пропорций. Если для видео указаны размеры, превышающие реальные, картинка получится растянутой. Аналогично при указании меньшего размера, картинка сожмется.

Заметка
Желательно всегда задавать размеры. Это позволит браузеру заранее подготовить область для вставки видео, не дожидаясь его загрузки, что избавит вас от ужасных дерганий страницы.

Дополнительные настройки видео

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

Для автоматического запуска видео, сразу после загрузки страницы нужно добавить атрибут autoplay. Если будет отсутствовать панель управления, пользователь не сможет остановить показ. Иногда это раздражает пользователей сайта. Особенно нужно обратить внимание на наличие панели управления при добавлении атрибута loop. Он заставляет видео воспроизводиться заново при достижении концовки.

Можно задать изображение-заставку, которое будет показано вместо экрана воспроизведения. Как только начнется просмотр видео, изображение сменится видеорядом. Это можно сделать с помощью атрибута poster, который должен содержать в своем значении URL-адрес изображения.

Выбор форматов воспроизведения

Во времена внедрения стандарта HTML5 не все браузеры поддерживали те или иные возможности. Эти проблемы коснулись и элемента <video>. Существовали огромные разночтения в обрабатываемых форматах видео.

Сейчас нет никаких причин использовать форматы, отличные от MPEG4. Он поддерживается всеми современными браузерами. Для вставки такого видео нужно просто указать URL-адрес в атрибуте src.

Если хотите, чтобы устаревшие браузеры смогли воспроизводить ваше видео, используйте элементы <source>, которые должны быть обернуты элементом <video>.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Добавление альтернативных видеофайлов</title>
    </head>
    <body>
        <video controls width="50%">
            <source src="test-video.mp4" type="video/mp4">
            <source src="another-vido.ogg" type="video/ogg">

            Ваш браузер не поддерживает доступные форматы!
        </video>
    </body>
</html>

Браузеры обрабатывают такую структуру по порядку, проверяя каждый элемент <source> на наличие видеофайла с поддерживаемым форматом. Если он найдет такой, остальные определения игнорируются. Нужный файл может быть не найден, поэтому вместо видео показывается сообщение, добавленное нами в самом конце.

Элементы <source> имеют два атрибута. src — это URL-адрес видеофайла, а в атрибуте type задается его медиа-тип. Медиа-тип может быть одного из трех форматов: video/ogg, video/mp4 или video/webm.

Последние публикации