Как вставить видео на страницу на сайте. Элемент Video

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

 Чтобы вставить видео на свой сайт, можно использовать элемент html5 VIDEO:

<video controls autoplay src="video/preroll.mp4" width="480” height="360" poster="images/prerollposter.jpg" id="video">

что означают следующие атрибуты в теге видео:

controls - логический атрибут, если есть браузер добавит элементы управления видео (стоп, пауза, смотреть и др.)

autoplay - логический атрибут, если есть видео запустится автоматически после загрузки страницы

src - атрибут показывает где искать видео на компе или в сети

width, height - определяет ширину и высоту плеера, если видео меньше области, то браузер будет тратить ресурсы на масштабируемость и могут появится полосы (pillar box или Letter Box)

poster - изображение которое показывается когда страница загрузилась, а видео не было начато воспроизводиться

loop - логический атрибут зацикливающий видео

preload - логический атрибут для оптимазации загрузки видео

source - элемент в элементе video, который заменяет атрибут src, чтобы дать браузеру выбрать наиболее оптимальный для него формат видео.

Например:

<video id="video" poster="poster.jpg" controls width="480" height="360">
<source src="video/preroll.mp4">
<source src="video/preroll.webm">
<source src="video/preroll.ogv">
<p>Sorry, your browser doesn't support the video element</p>
</video>

Мы убираем атрибус src и вместо него ставим source

Если браузер не поддерживает элемент Video мы показываем сообщение пользователю в теге p.

Чтобы обеспечить конкретизацию для своих видео форматов браузеру и чтобы он быстрее начинал загружать видео на устройстве пользователя, нужно добавить опциональный атрибут type и указать MIME и используемые кодеки. Например:

<video id="video" poster="poster.jpg" controls width="480" height="360"> 
<source src="video/preroll.mp4" type='video/mp4; codecs="avcl.42E01E, mp4a.40.2"'>
<source src="video/preroll.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video/preroll.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>Sorry, your browser doesn't support the video element</p>
</video>

type - опция, атрибут, подсказывает браузеру сможет тот или нет воспроизвести данный файл

video/ogg - это тип MIME который определяет формат контейнера

theora, vorbis - название видеокодека и аудиокодека, заключаются в двойные кавычки

Дополнительную информацию о данных параметрах вы сможете найти но адресу wiki.whatwg.org/wiki/Video_type_parameters

 Flash video

Если браузер не может проиграть html5 видео, то можно ему подсунуть флэш видео формат. Делается этот так:

<video poster="video.jpg" controls>
<source src="video.mp4">
<source src="video.webm">
<source src="video.ogv">
<object>...</object>
</video>

Вставьте свой элемент <object> в элемент <video>. Если браузер не узнает элемент <video>, то будет использоваться элемент <object>.

Про поддержку браузерами различных видео форматов смотри тут https://en.wikipedia.org/wiki/HTML5_video