Урок:

Додавання мультимедійних елементів на сторінки сайту

02.02.2025

0 0

Інформатика

10 Клас, 11 Клас

447

Завантажити урок 2

Опрацюйте теоретичний матеріал:

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

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

Тег <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;

- полоса прокрутки;

- відображення часу;

- гучність.

Атрибути:

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

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

Тег <video>

Елемент <video> вбудовує цифрове відео на веб-сторінку.

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

Атрибути:

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

Елемент <video> також може містити один або кілька елементів <source>, які будуть вказувати на файли різних форматів:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Video</title>
 </head>
 <body>
 <p><b>Вагнер, "Політ валькірій", фрагмент</b><p>
 <video width="320" height="240" controls="controls" 
 poster="images/valkiriya.jpg">
 <source src="video/Ride_of_the_Valkyries.mp4" type="video/mp4">
 <source src="video/Ride_of_the_Valkyries.ogv" type="video/ogg">
 Ваш браузер не підтримує тег video
 <a href="video/Ride_of_the_Valkyries.mp4">Завантажте відео</a>
 </video>
 </body>
</html>

Вставка відео з YouTube

Тег <iframe> (inline frame - рядковий фрейм) - тег-контейнер для автономної області на сторінці, в яку завантажується самостійний документ, який визначається атрибутом src.

Вартий уваги спосіб вставки на веб-сторінку відео, яке розташоване на відео-хостингу .

По-перше, відео не буде займати місце на сервері.

По-друге, створивши власний канал з відо-матеріалами на youtube, можна привертати увагу користувачів до сайту.

По-третє, таке відео легко зробити адаптивним до будь-якого розміру екрану, вставивши його у контейнер <div>, для якого і задаються адаптивні розміри.

Вставити відео у такий спосіб досить просто:
0. Необхідно перейти на сторінку потрібного відео на youtube.com.
1. Натиснути кнопку "Поділитися" під відео
2. Обрати "Вставити"
3. Натиснути "Копіювати"
4. Вставити у html-документ з буфера обміну скопійований код. Щоб відео було адаптивним, необхідно огорнути цей тег у контейнер <div>, якому у стилях надають адаптивні розміри