Відео та аудіо

У стандарті HTML5 запровадили теги для розмітки медіаконтенту різних форматів. Тож, розглянемо їх.

Відео​

Для розмітки відеоконтенту використовують парний тег <video>.

<video
  src="videofile.webm"
  poster="poster.jpeg"
  width="640"
  controls
  autoplay
  loop
  preload="auto"
></video>

Атрибути тегу <video>:

• src - адреса відеофайлу

• poster - адреса зображення, яке завантажиться як постер перед відтворенням відео

• width і height - висота і ширина відео-контейнера

• controls - атрибут-прапорець, при його вказанні будуть елементи управління відео

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

• loop - атрибут-прапорець, при його вказанні відео буде починати програватися знову і знову по закінченні.

• preload - атрибут, який вказує режим попереднього завантаження відео. Може мати такі значення: none - відео не завантажується заздалегідь, metadata - завантажиться службова інформація (наприклад тривалість відео), auto - заздалегідь завантажуватимуться всі відео.

Формати відео​

Існує багато відеоформатів. Найпопулярніші з них: webm, mp4 та ogg. Утім, браузер може не підтримувати певний відеоформат. Щоб уникнути цієї проблеми можна вказати відеофайли різних форматів.

Для цього замість атрибута src використовують тег <source>, який вкладають в тег <video>. Тег <source> має атрибут src в якому вказують посилання на відеофайл і атрибут type в якому вказують тип відеофайлу. Браузер при завантаженні обере перший файл, який найкраще для нього підходить.

<video
  poster="poster"
  width="640"
  controls
>
  <source
    src="videofile.webm"
    type="video/webm"
  />
  <source
    src="videofile.mp4"
    type="video/mp4"
  />
  <source
    src="videofile.ogg"
    type="video/ogg"
  />
</video>

Аудіо​

Аудіофайли на сторінці розміщують в тезі <audio>. Має схожий формат запису як і тег <video>.

<audio src="audiofile.mp3" controls autoplay loop preload="auto"></audio>

Атрибути тегу <audio>:

• src - адреса аудіофайлу

• controls - атрибут-прапорець, при його вказанні будуть елементи управління аудіо

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

• loop - атрибут-прапорець, при його вказанні аудіо буде починати програватися знову і знову по закінченні.

• preload - атрибут, який вказує режим попереднього завантаження аудіо. Може мати такі значення: none - аудіо не завантажується заздалегідь, metadata - завантажиться службова інформація (наприклад тривалість аудіо), auto - заздалегідь завантажуватимуться всі аудіо.

Формати аудіо​

Існує багато аудіоформатів. Найпопулярніші з них для веб: mp3 та ogg. Утім, браузер може не підтримувати певний аудіоформат. Щоб уникнути цієї проблеми можна вказати аудіофайли різних форматів у тезі <source>. Тег <source> має атрибут src в якому вказують посилання на аудіофайл і атрибут type в якому вказують тип аудіофайлу. Браузер при завантаженні обере перший файл, який найкраще для нього підходить.

<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg" />
  <source src="audiofile.ogg" type="audio/ogg" />
</audio>

Підтримка старих браузерів​

Це малоймовірно, але може статися так, що браузер настільки старий, що не підтримує стандарт HTML5 для медіаконтенту. Для цього всередині медіаконтейнера потрібно вказати фразу про неможливість відтворення такого медіаконтенту і необхідність завантажити сучасніший браузер.

<video
  poster="poster"
  width="640"
  controls
>
  <source
    src="videofile.webm"
    type="video/webm"
  />
  <source
    src="videofile.mp4"
    type="video/mp4"
  />
  <source
    src="videofile.ogg"
    type="video/ogg"
  />
  
   Your browser does not support the video element.
</video>

<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg" />
  <source src="audiofile.ogg" type="audio/ogg" />
  Your browser does not support the audio element.
</audio>