Вставка відео: <video>

4.1 Основи тега <video>

Вставка відео на веб-сторінку за допомогою елемента <video> дозволяє відтворювати відеоконтент прямо у браузері. Цей елемент надає широкі можливості для налаштування відтворення, включаючи підтримку різних форматів, керування за допомогою атрибутів і методів JavaScript. Давай розглянемо цей елемент детальніше.

Найпростіший приклад

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

    
      <video src="videofile.mp4" controls></video>
    
  

Приклад з кількома джерелами

Щоб забезпечити підтримку різних браузерів, можна вказати кілька джерел відео за допомогою тега <source>. Це дозволяє браузеру обрати підтримуваний формат відео.

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

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

• src: вказує шлях до відеофайлу
• controls: відображає елементи керування відтворенням
• autoplay: автоматично відтворює відео при завантаженні сторінки
• loop: повторює відтворення відео після завершення
• muted: вимикає звук при завантаженні
• preload: вказує, як браузер повинен завантажувати відео. Можливі значення: none, metadata, auto
• width і height: встановлюють ширину і висоту відеоплеєра
• poster: вказує зображення-заповнювач, яке відображається до початку відтворення відео

4.2 Основні атрибути

1. Автоматичне відтворення

Атрибут autoplay змушує відеофайл автоматично починати відтворення відразу після завантаження сторінки. Як і у випадку з аудіо, використовувати цей атрибут потрібно обережно, щоб не дратувати користувачів.

    
      <video src="videofile.mp4" autoplay></video>
    
  

2. Зациклення відео

Атрибут loop вказує, що відеофайл повинен відтворюватися в безкінечному циклі. Це корисно для фонових відео або анімацій.

    
      <video src="videofile.mp4" loop></video>
    
  

3. Вимкнення звуку

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

    
      <video src="videofile.mp4" muted></video>
    
  

4. Попереднє завантаження

Атрибут preload вказує браузеру, як він повинен завантажувати відеофайл при завантаженні сторінки. Він може приймати одне з трьох значень:

• none: браузер не повинен попередньо завантажувати відео
• metadata: браузер повинен завантажувати лише метадані (тривалість, розміри і т. д.)
• auto: браузер повинен повністю завантажувати відео, коли сторінка завантажується

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. Постер

Атрибут poster вказує зображення-заповнювач, яке відображається до початку відтворення відео. Це може бути корисно для надання користувачу візуальної інформації про вміст відео.

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 Підтримувані формати відео

Для забезпечення кросбраузерної сумісності рекомендується використовувати кілька форматів відео. Найбільш поширені формати включають MP4, WebM та OGG.

Формат MP4

MP4 (MPEG-4 Part 14) — один із найпопулярніших форматів відео. Він підтримується більшістю браузерів і пристроїв. MP4 використовує стиснення з втратами і забезпечує гарну якість відео при відносно невеликому розмірі файлу.

Приклад:

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

Формат WebM

WebM — відкритий формат стиснення відео, розроблений для використання в інтернеті. Він підтримується більшістю сучасних браузерів і забезпечує гарну якість відео.

Приклад:

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

Формат OGG

OGG (Ogg Theora) — відкритий формат відео, який підтримується багатьма браузерами. Цей формат забезпечує гарну якість відео і часто використовується як альтернатива MP4 та WebM.

Приклад:

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

Приклад використання кількох форматів для забезпечення сумісності

Для забезпечення кросбраузерної сумісності рекомендується вказати кілька джерел відео у різних форматах. Браузер вибере перший підтримуваний формат.

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>