Как установить видео на сайт

Как установить видео на сайт

ПОДЕЛИТЬСЯ СТАТЬЕЙ:


Приветствую вас друзья!

В этой статье рассмотрим способ размещения видео на сайте с помощью современного HTML5, в тегах <video></video> и интеграцию с ресурса YouTube.

Поддержку тега браузерами можно посмотреть на Саn I Use , а какая поддержка на момент написания статьи смотрите на скриншоте:

Поддержка тега видео скриншот can i use

Поддержка осуществлена в среднем на 90%.

Возьмём за базовую разметку следующий код:

    <video controls height="1280" width="720" preload=”metadata”>
	 <source src="media/video.mp4" type="video/mp4">
	 <source src="media/video.ogv" type="video/ogg">
	 <source src="media/video.webm" type="video/webm">
    </video>

Теперь разберем его. Атрибут controls у тега <video> добавляет панель управления к видеоролику, height и width задают ему высоту и ширину, preload указывает способ загрузки видео. Подробнее про атрибуты в таблице ниже.

Таблица 1 атрибутов тега <video>

Атрибут

Описание

autoplay

Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы.

controls

Добавляет панель управления к видеоролику.

height

Задает высоту окна для отображения видеоданных, возможные значения: px или %

width

Задает ширину окна для отображения видеоданных, возможные значения: px или %

loop

Повторяет воспроизведение видео с начала после его завершения.

muted

Выключает звук при воспроизведении видеофайла.

poster

Указывает URL файла картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.

preload

Атрибут, отвечающий за предварительную загрузку видеоконтента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения:
auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение.
metadata — браузер загружает первую небольшую часть видеофайла, чтобы определить его основные характеристики.
none — отсутствие автоматической загрузки видеофайла.

src

Указывает путь к воспроизводимому видеоролику.

Элемент <source> используется для указания нескольких медиа-ресурсов для <video> перечисляем в <source> все форматы, начиная с самого распространенного для того, чтобы обеспечить воспроизведение видео-контента во всех браузерах.

“Тут нужно передать привет стандартам.”

Далее в src передаем путь до видеофайла в нужном формате, и передаем MIME-тип type каждого видеофайла.

Таблица 2 атрибутов тега <sourse>

Атрибут

Описание

src

Содержит абсолютный или относительный URL-адрес медиафайла.

type

Определяет MIME-тип медиафайла.

media

Определяет MIME-тип медиафайла.

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

Чтобы сделать видео на сайте адаптивным задайте через файл стилей для тега <video>

video {
width: 100%;
height: auto;
max-height: 100%; }
Таблица 3 Поддержка видео кодеков в браузерах

Браузеры

Internet Exsplorer

EDGE

Crome

Opera

Safari

Firefox

ogg/theora

Нет

с v.17

с v.4

с v.11.5

Нет

с v.3.5

H.264

С 9 версии

с v.12

с v.4

с v.25

с v.3.2

с v.21

WebM

Нет

с v.14

с v.6

с v.11.5

Нет

с v.4

Так же можно посмотреть поддержку на Can I use, ссылка в начале статьи.

Статья по теме: Что такое HTML5

Где взять необходимые форматы видеофайла

Можно конвертировать ваш файл с помощью приложений на вашем компьютере, такой как Movavi.

А можно на онлайн ресурсах Convertio  или Online-convert  или любых других, которые найдутся на просторах интернета.

Адаптивное видео youtube на сайт

Вот ссылка на официальную документацию youtube “как встроить видео или плейлист ” проделав шаги из инструкции вы получите iframe, но он будет фиксированной ширины и высоты. Код ниже делает видео с ютуба адаптивным. Нужно полученный iframe обернуть в тег div с заданными инлайн стилями.

<div style="position: relative; padding-bottom: 50%; padding-top: 15px; height: 0; overflow: hidden;"> 
    <iframe style="position: absolute; top:0; left:0;" src="https://www.youtube.com/ВАШ URL" allowfullscreen="" width="100%" height="100%" frameborder="0"></iframe> 
</div>

Для экономии времени вы можете в атрибут src вставить свою ссылку, и все!

Получите адаптивное видео с YouTube на сайте для любых экранов.

На этом все.


Читать еще:

Как установить видео на сайт

Коммерческие и некоммерческие запросы: суть и различия

Адаптивная Recapcha

Modx перенос сайта на другой хостинг

Сайтостроение: хороший хостинг - хорошее начало