Мультимедіа �на вебсторінках
Мультимедійні вебресурси
Рівень взаємодії з користувачем - інтерактивний
Текст
Представлення текстової інформації різними мовами
Аудіо
Звуковий супровід дій, як самостійний об’єкт, як фон
Відео
Трансляція відео у прямому ефірі або у запису
Анімація
Мультиплікація – комбінування нерухомих об’єктів задля ілюзії руху
Етапи розміщення мультимедійних об’єктів на сайті
1
2
3
Тип мультимедійних даних
Всі дані, надіслані мережею, позначаються певними назвами, які однозначно вказують їх тип, —так званими MIME (Multipurpose Internet Mail Extensions, багатоцільові розширення пошти Інтернету).
Тип MIME присвоює даним та програма, що їх надсилає, браузер (як програма, що їх отримує) визначає за типом MIME цих даних, чи підтримувати цей тип даних, і якщо так, що саме з ними робити.
Приклад
Вебсторінка має тип MIME text/html.
Графічне зображення формату GIF має тип MIME image/gif.
Свої типи MIME мають і мультимедійні файли. �
Типи MIME-форматів, які підтримуються браузерами
Формат файлів | Тип MIME | Браузери, якими підтримується |
MPEG4 | video/mp4 | Chrome, Safari (не підтримується Firefox, Opera) |
OGG, OGA, OGV | audio/ogg (для аудіофайлів)�video/ogg (для відеофайлів) | Chrome, Firefox, Opera |
MP4 MP3 | video/mp4 Audio/mp3 | Chrome, Safari |
WEBM WAV | video/webm audio/mpeg | Chrome, Firefox, Opera |
Онлайн-конвертори
Відео у форматі AVI на сайті засобами HTML5 не відтворюється. Його слід конвертувати у формати, які підтримуються браузерами.
Можна скористатися онлайн-конверторами�
Щоб додати аудіо на вебсторінку
<audio src=“audio/music.mp3” controls></audio>
Вставка панелі керування
Шлях до файлу
Для адекватного відображення в усіх браузерах в контейнер <audio> додають тег <source>:
<source src="audio/music.mp3" type=“тип MIME">
Атрибути тега <audio>
Атрибут | Призначення |
autoplay | Відтворює музику відразу після завантаження сторінки |
controls | Додає панель керування до аудіофайлу |
loop | Циклічно повторює аудіофайл |
muted | Вказує, що звук має бути відключений |
preload | Використовується для завантаження файлу разом із завантаженням вебсторінки |
src | Вказує шлях до аудіофайлу |
Приклад використання тега <audio>
Щоб додати відео на вебсторінку
<video src=“video/film.mp4” controls></video>
Шлях до файлу
Вставка панелі керування
Атрибути тега <video>
Атрибут | Призначення |
autoplay | Відео починає відтворюватися автоматично після завантаження сторінки |
controls | Додає панель керування до відеоролика |
height | Задає висоту області для відтворення відеоролика |
loop | Повторює відтворення відео від початку до його завершення |
muted | Вказує, що відео буде відтворюватися без звуку |
poster | Вказує адресу картинки, яка буде відображатися, поки відео недоступне або не відтворюється |
preload | Використовується для завантаження відео разом із завантаженням вебсторінки |
src | Вказує шлях до відеоролика |
width | Задає ширину області для відтворення відеоролика |
Приклад використання тега <video>
Вставка відео з YouTube
1
2
Вставка відео з YouTube
3
Домашнє завдання
Створити веб сторінку, яка повинна містити зображення вашої улюбленої тварини і відео про неї, наприклад так: