Мультимедіа на веб

1. Мультимедіа
на веб-сторінках

2. Пригадаємо
1. Наведіть приклади анімації на веб-сторінці.
2. Якими засобами можна створювати анімації?
3. З яких компонентів складається CSS-анімація?
4. Опишіть послідовність команд у CSS для
створення анімації
5. Які властивості CSS використовуються для створення анімації?
6. У чому різниця між анімацією, створеною графічними
редакторами, та анімацією, розробленою виключно
засобами CSS ?

3. Пригадаємо
Мультимедіа це
комп’ютеризована технологія, що
об’єднує роботу зі всіма
джерелами даних, засіб подання
різних видів інформації у
цифровому вигляді.
Текстові
Графічні
АнімаціяАудіо
Відео

4. • Технології опрацювання мультимедіа
зараз є одним із найперспективніших і
найпопулярніших напрямків. Мета —
створення продукту, який передає
інформацію шляхом упровадження та
використання нових технологій,
набору зображень, текстів і даних, що
супроводжуються звуком, відео,
анімацією й іншими візуальними
ефектами

5. • Всі дані, надіслані мережею, позначаються певними назвами, які
однозначно вказують їх тип, —так званими MIME
(Multipurpose Internet Mail Extensions, багатоцільові
розширення пошти Інтернету).
Тип MIME присвоює даним та програма, що їх надсилає,
браузер (як програма, що їх отримує) визначає за типом MIME
цих даних, чи підтримувати цей тип даних, і якщо так, що саме з
ними робити.

6. Приклад
• Веб-сторінка має тип MIME text/ html.
• Графічне зображення формату GIF має тип MIME image /
gif.
• Свої типи MIME мають і мультимедійні файли.

7. • Сучасні браузери працюють з певними форматами
мультимедійних файлів із десятків наявних сьогодні.
• Крім того, різні браузери підтримують різні формати файлів.

8. Формат файлів Тип 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
Типи MIME-форматів мультимедійних
файлів, які підтримуються браузерами

9. • Відео у форматі AVI на сайті засобами HTML5
не відтворюється. Його слід конвертувати у
формати, які підтримуються браузерами.
• Можна скористатися онлайн-конверторами

10. HTML5-відео
• стандарт для розміщення відеофайлів у мережі з
оригінальним програмним інтерфейсом без залучення
додаткових модулів.
• За допомогою елемента <video> з’явилася можливість
додавати відеовміст на веб-сторінки, а також стилізувати
зовнішній вигляд відеоплеєра за допомогою css-стилів.
• Для відображення на сторінці відеозапису необхідно
використовувати тег <video>, у якому використовується тег
<source>, що має обов’язковий атрибут src, який визначає
адресу відео.

11. HTML5-аудіо
• Елемент HTML5 <audio> визначає стандартний спосіб
розміщення аудіофайлу на веб-сторінку
• Має такі ж самі атрибути, що і тег <video> .
• Для відображення на сторінці аудіозапису необхідно
використовувати тег < audio>, у якому використовується тег
<source>, що має обов’язковий атрибут src, який визначає
адресу аудіо

12. Атрибут Опис
Autoplay Автоматичне відтворення відеофайла відразу після завантаження сторінки
controls
Вказівка браузеру, що потрібно відобразити базові елементи управління відтворенням
(відтворення, пауза, гучність)
loop Циклічне відтворення відеофайла
poster
URL-файл зображення, яке відображатиметься під час завантаження відеофайла або
поки користувач не натисне на кнопку PLAY. Якщо атрибут не задано, буде
перший кадр відеофайла
auto Браузер завантажує відеофайл повністю, щоб він був доступний, коли почнеться
src Містить абсолютну або відносну URL-адресу відеофайла
Основні атрибути тегів <video> та <audio>

13. Приклад вбудовування відео на веб-
сторінку
<video controls>
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.webm" type="video/webm">
<source src="video/movie.ogv" type="video/ogg>
</video>

14. Приклад вбудовування аудіо на веб-
сторінку
<audio controls>
<source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
<source src="audio/music.mp3" type="audio/mpeg">
</audio>

15. • Указати правильний доктайп: <!DOCTYPE html>
Крок 1
• У стилях CSS позначаємо тип елемента HTML
<video> (<audio>) як блочний
{ display: block; }
Крок 2
• Для досягнення кросбраузерності доцільно перераховувати в
<source> усі формати, починаючи з більш пріоритетного, та
зазначати тип MIME для кожного відео-(аудіо-)файла.
Крок 3

16. Зауваження
З огляду на стандарти розробки сайтів варто створити в теці Сайт
додаткову теку video (audio), де розмістити відконвертовані відео- чи
аудіофайли.
В елементі <video> (<audio>) краще використовувати атрибут
controls, який відповідає за відображення елементів керування
плеєром.
Хоча елементи <video> (<audio>) мають атрибути width та height,
логічно оголошувати розмір у таблицях стилів (нагадаємо, що
стандарт html5 відповідає лише за семантичну розмітку)

17. Цікаво
До появи стандарту HTML5-відео використовувався
елемент <embed>, який визначає контейнер для
зовнішнього застосування або інтерактивного вмісту
(іншими словами, плагіна).
<embed> - непарний тег, і не може містити
альтернативний текст
Всі основні браузери протягом довгого часу
підтримували цей елемент.
Проте даний тег додали лише в специфікацію
HTML5.
Приклад: <embed width=“400” src=“anima.swf”>

18. Завдання для самостійного виконання
Додайте на першу сторінку завдання 17
уроку два відеофайли (можна однакові),
щоб вони відображалися, як наведено на
рис.
Підказка: використовуйте контейнер
<div> зі стилем {display: inline-block;}
Додайте на другу сторінку після
графічного об’єкта аудіофайл.
Результат надішліть учителю

19. Аналізуємо. Обговорюємо
1. Дайте означення мультимедіа.
2. Наведіть приклади об’єктів мультимедіа.
3. Що таке формат MIME?
4. Поясніть необхідність конвертації відеофайлів.
5. Які теги для яких форматів використовують?
6.

20. Домашнє завдання
Використовуючи тег <embed> додайте
будь-який флеш-ролик на третю
сторінку завдання до уроку 17
(як допомогу перегляньте відео
https://www.youtube.com/watch?v=
i_l4X2K6PbE)