Урок 20

Розміщення та відтворення на вебсторінці мультимедійних даних 

Стандарт HTML5 вводить нові елементи <audio> і <video>, які дозволяють веброзробникам вбудовувати звук і відео на вебсторінці, не вимагаючи власних плагінів. Звичайно з цього випливає, що сам браузер повинен мати можливість відтворення таких файлів, на цей час тільки останні версії браузерів підтримують ці елементи.

приклади 💬

Тег <audio>

Елемент <audio> впроваджує звуковий файл на вебсторінку. Це замінний елемент, але він не належить до порожніх елементів, тому він може містити і власний контент, і інші елементи. У своїй простій формі елемент <audio> повинен мати тільки атрибут src, який вказує шлях до звукового файлу:

<audio src="audio/file.mp3"></audio>

Однак він рідко використовується в такій простій формі. За замовчуванням елемент <audio> не має елементів управління і тому повністю невидимий. Він буде розташовуватися в HTML-документі і може бути доступний в браузері, можна додати до аудіофайлу його власні елементи управління, які будуть відображатися на вебсторінці в місці розташування елемента <audio>:

<audio src="audio/file.mp3" controls></audio>

Ці елементи управління надаються браузером і можуть візуально відрізнятися залежно від браузера, але надані функції залишаються незмінними:

• кнопка play/pause;
• смуга прокрутки;
• відображення часу;
• гучність.

Підручник, сторінка HTML аудіо з редактором

 Підручник, сторінка HTML відео з редактором

Атрибути

• autoplay − звук починає грати відразу після завантаження сторінки.
• controls − додає панель управління до аудіофайлу.
• loop − повторює відтворення звуку з початку після його завершення.
• muted − відключає звук при відтворенні музики.
• src − вказує шлях до файлу, який відтворюється.

Тег <video>

Елемент <video> вбудовує цифрове відео на вебсторінці. Як і у випадку з <audio>, елемент <video> може мати атрибут src, який вказує URL-адресу відеофайлу:

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

Атрибути

• autoplay − відео починає відтворюватися автоматично після завантаження сторінки.
• controls − додає панель управління до відеоролика.
• width − задає ширину області для відтворення відеоролика.
• height − задає висоту області для відтворення відеоролика.
• loop − повторює відтворення відео від початку після його завершення.
• poster − вказує адресу картинки, яка буде відображатися, поки відео недоступне або не відвоюється.
• preload − використовується для завантаження відео разом із завантаженням вебсторінка.
• src − вказує шлях до відеоролика, який відвоюється.

Додати відео з YouTube

• Завантажте відео на YouTube
• Зверніть увагу на ідентифікатор відео - Id
• Визначте елемент <iframe> на вашій вебсторінці
• Атрибут src вказує URL-адресу відео
• Використовуйте атрибути width (ширина) та height (висота), щоб визначити розміри плеєра
• Додайте до URL інші необхідні параметри

Практичне завдання

Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки.

• 1.    Додайте на сторінку відео файл та аудіо файл.

  Підказка: використовуйте контейнер <video width="500" controls> з відображенням кнопок керування плеєра.
  
  

  2.    Додайте <audio controls>  та під'єднати аудіофайл.

  Підказка: файли з аудіо та відео повинні бути в одній теці з файлом .html

  3.    Протестуйте сторінку. Результат надішліть учителю.