Урок 19


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

Тег <audio>

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

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

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

можна додати до аудіофайлу його власні елементи управління, які будуть відображатися на вебсторінці в місці розташування елемента <audio>:
<audio src="audio/file.mp3" controls></audio>
Ці елементи управління надаються браузером і можуть візуально відрізнятися в залежності від браузера, але надані функції залишаються незмінними:
  • кнопка play/pause;
  • смуга прокрутки;
  • відображення часу;
  • гучність.

текст сторінки:

<body>
  <p><b> Севара, "Там нет меня". вокал</b></p>
  <audio controls>
    <source src="Севара - Там Нет Меня.mp3" type="audio/ogg; codecs=vorbis">
</body>

* файл Севара - Там Нет Меня.mp3 знаходиться в одній теці із вебсторінкою

Атрибути

  • 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 − вказує шлях до відеоролика, який відвоюється.

текст сторінки:

<body> <p><b>Севара, "Авторадио"</b><p> <video width="320" height="240" controls="controls"> <source src="videoplayback.mp4" type="video/mp4">

* файл videoplayback.mp4 знаходиться в одній теці із вебсторінкою

Додати відео з YouTube
1. Відкрити YouTube. Знайти за запитом відео.
2. Вибрати кнопку "Поделиться", у вікні вибрати кнопку < > "Встроить"
3. Скопіювати сформований у вікні код "Встраиваемое видео". Додати до HTML-файлу в режимі Блокноту, зберегти, перевірити якість відображення сторінки у браузері:





Додатково:

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

Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки.
  • створити html документ, зафіксувати автора: додати прізвище , ім'я  та клас
  • додати теги, що задають музичний супровід на свій смак
  • додати теги з відео, обрати відео з YouTube, за своїми уподобаннями
  • протестувати документ
  • надіслати на перевірку

Немає коментарів:

Дописати коментар

Підписатися на: Дописи (Atom)