Урок 6. Мультимедіа: Відео та аудіо на сторінці, атрибути autoplay, controls

План уроку: Мультимедіа — відео та аудіо на сторінці, атрибути autoplay, controls (25-30 хвилин)

1. Вступ: Що таке мультимедіа в HTML (2-3 хвилини)

• З цього уроку ви дізнаєтесь, як інтегрувати відео- та аудіофайли в структуру вебсторінки, використовуючи спеціалізовані теги. Мультимедіа допомагає оживити ваш сайт, додаючи інтерактивні елементи.

2. Тег <video> для вставки відео (10 хвилин)

• Ціль: Пояснити учням, як додати відео на сторінку за допомогою тега <video> і керувати його відтворенням.

Основна структура тега <video>:

• Тег <video> дозволяє вставляти відео на сторінку. Цей тег підтримує кілька форматів відео, зокрема MP4, WebM та Ogg.

  • Приклад:

    <video width="320" height="240" controls>
      <source src="video.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    

Атрибути для відео:

• controls — додає елементи керування (відтворення/пауза, перемотка, гучність).

• autoplay — автоматично запускає відтворення відео після завантаження сторінки (не рекомендується без muted).

• muted — вимикає звук за замовчуванням.

• loop — дозволяє повторювати відео безперервно.

  • Приклад з autoplay і muted:

    <video width="320" height="240" autoplay muted>
      <source src="video.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    

Елементи керування відео (controls):

• Додавання атрибута controls дозволяє користувачеві контролювати відтворення відео: ставити на паузу, регулювати звук, перемотувати тощо.

  • Приклад з елементами керування:

    <video width="320" height="240" controls>
      <source src="video.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    

3. Тег <audio> для вставки аудіо (10 хвилин)

• Ціль: Ознайомити учнів із вставкою аудіофайлів на сторінку за допомогою тега <audio>.

Основна структура тега <audio>:

• Тег <audio> дозволяє додавати на сторінку аудіофайли. Як і відео, аудіо може мати елементи керування.

  • Приклад:

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

Атрибути для аудіо:

• controls — додає стандартні елементи керування (гучність, відтворення/пауза).

• autoplay — автоматично запускає відтворення після завантаження сторінки.

• loop — повторює аудіо після його завершення.

• muted — автоматично вимикає звук.

  • Приклад з autoplay і muted:

    <audio autoplay muted>
      <source src="audio.mp3" type="audio/mp3">
      Your browser does not support the audio element.
    </audio>
    

Елементи керування аудіо (controls):

• Використання атрибута controls забезпечує користувачів зручним інтерфейсом для відтворення, паузи, гучності та перемотування аудіофайлів.

  • Приклад з елементами керування:

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

4. Практика: Додавання мультимедіа на сторінку (10 хвилин)

• Ціль: Закріпити знання учнів про теги <video> і <audio>, створивши просту сторінку з відео та аудіо.

Завдання:

• Створити вебсторінку, яка містить:
  • Відео з елементами керування.
  • Аудіофайл з автоматичним відтворенням, але без звуку (muted).
  • Повторне відтворення аудіо в циклі (loop).

Приклад завдання:

5. Підсумок і обговорення (5 хвилин)

• Ціль: Підтвердити, що учні зрозуміли, як додавати мультимедіа на сторінку та використовувати атрибути для керування відео й аудіо.
  
  

• Що повторити:

  • Як додати відео та аудіо на сторінку за допомогою HTML.
  • Що робить атрибут controls та інші важливі атрибути, такі як autoplay, loop, і muted.
    
    

• Запитання для обговорення:

  • Як ви можете налаштувати відео для автоматичного відтворення?
  • Які елементи керування додаються до відео при використанні атрибута controls?
  • Чим відрізняються атрибути autoplay і muted?

Домашнє завдання

• Створити вебсторінку з відео та аудіо:
  • Додайте відео з елементами керування та розміром 640х360 пікселів.
  • Додайте аудіо, яке відтворюється автоматично, але без звуку.
  • Додайте текст, який описує відео та аудіо, що ви використовуєте.

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