<video>

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

На веб-странице видео выводится вот так:

<video src="sample.mp4"></video>

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

<video poster="poster.png" preload="metadata" controls tabindex="0">
  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

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

Поддержка видеоформата
Браузер WebM Ogg/Theora MPEG-4/H.264
Название Формат WebM Формат Ogg Формат MPEG-4
IE
Edge
Chrome
Firefox
Opera
Safari
iOS Safari
Android

Поддержка видеотега

Таблица поддержки браузерами: “<video>”

Что можно сделать с видео HTML5, смотрите на странице «Возможности видео».