1 of 27

РОЗМІЩЕННЯ ТА ВІДТВОРЕННЯ НА ВЕБ-СТОРІНКАХ МУЛЬТИМЕДІЙНИХ ДАНИХ

2 of 27

ПРИГАДАЄМО

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

Текстові

Графічні

Анімація

Аудіо

Відео

3 of 27

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

4 of 27

ФОРМАТИ ВІДЕОФАЙЛІВ

  • Формат AVI (Audio Video Interleaved — аудіо- та відеодані, що чергуються) призначений для записування звуку та рухомих зображень.
  • AVI-дані можна редагувати, експортувати, стискати, використовуючи програми Adobe Premiere, Adobe After Effects та інші.
  • AVI-інформація зберігається у файлах із розширенням .avi. Для її відтворення потрібна спеціальна програма, яка входить у комплект поставки деяких браузерів. її можна також встановити додатково.

5 of 27

ФОРМАТИ ВІДЕОФАЙЛІВ

  • Технологія MOV, або QuickTime, призначена для створення, зберігання та відтворення мультимедійних даних. Вона дає змогу об'єднувати звук, текст, анімацію та відео в одному файлі. MOV-інформація зберігається у файлах із розширенням .mov. Програмне забезпечення для її відтворення також постачається у комплекті з більшістю браузерів.

6 of 27

ФОРМАТИ ВІДЕОФАЙЛІВ

  • MPEG (Moving Pictures Experts Group — група експертів з обробки рухомих зображень) розробила стандарт стиснення відео- та аудіоданих. Для перегляду MPEG-даних за допомогою браузера слід використовувати додатковий модуль. Формат має кілька версій, від MPEG-1 до MPEG-4. Відео файли цього формату мають розширення .mpeg.

7 of 27

ФОРМАТИ ВІДЕОФАЙЛІВ

  • Формат ASF (Advanced Streaming Format — розширений формат потокових даних) розроблено корпорацією Майкрософт для файлів, що містять потокове аудіо та відео Файли цього формату зазвичай мають розширення .asf.

8 of 27

ФОРМАТИ АУДІОФАЙЛІВ

  • Формат WAV (Windows Audio) був створений корпорацією Майкрософт і прийнятий як стандарт для звукового супроводу роботи системи і комп'ютерних ігор. WAV-дані зберігаються у файлах із розширенням .wav у нестиснутому вигляді. Ці файли містять інформацію про кількість доріжок, режим (моно або стерео), швидкість запису.

9 of 27

ФОРМАТИ АУДІОФАЙЛІВ

  • AIFF (Audio Interchange File Format — формат обміну аудіоданими) — це популярний формат платформи Macintosh, його також використовують для запису аудіоінформації на компакт-диск.
  • Дані AIFF-формату зберігаються у файлах із розширенням .aif, де міститься також інформація про моно- чи стереорежим, швидкість запису.

10 of 27

ФОРМАТИ АУДІОФАЙЛІВ

  • Формат МРЗ (MPEG-1 Audio Layer-3) має високий ступінь стискання даних і дає змогу створювати файли невеликого розміру (вони мають розширення .mрЗ). Завдяки цій властивості МРЗ сьогодні є найпоширенішим форматом зберігання аудіозаписів у Інтернеті.

11 of 27

ПОТОКОВІ МУЛЬТИМЕДІЙНІ ДАНІ

  • - це передавання та відтворення файлів мультимедіа у режимі реального часу.
  • Інформацію можна отримувати безпосередньо від джерела даних, зокрема з відеокамери або файлу на сервері. Дані відтворюються в міру їхнього надходження, копія на жорсткому диску комп'ютера користувача не створюється. Передавання потокових мультимедійних даних схоже на трансляцію телевізійних та радіопередач: користувач може приймати одну передачу, потім переключитися на інший канал або взагалі припинити приймання.

12 of 27

ПЕРЕВАГИ ПРИЙМАННЯ ПОТОКОВИХ МУЛЬТИМЕДІЙНИХ ДАНИХ

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

13 of 27

ПОШИРЕНІ ПОТОКОВІ ТЕХНОЛОГІЇ

  • RealAudio/Video — це технологія потокового передавання аудіо- та відеоінформації, розроблена компанією Progressive Networks.
  • Для відтворення даних необхідний додатковий програмний модуль RealPlayer. Файли, призначені для обробки засобами RealAudio/Video, мають розширення .ra, .ram, .rm, .rmm, .rmd.

14 of 27

ПОШИРЕНІ ПОТОКОВІ ТЕХНОЛОГІЇ

  • QuickTime Streaming Server — підтримує потокове передавання відео, аудіо, тексту та MIDI-інформації.

15 of 27

ПОШИРЕНІ ПОТОКОВІ ТЕХНОЛОГІЇ

  • Windows Media Server — це комплект цифрових компонентів для підтримування роботи з мультимедійними даними, що надає користувачам повний набір засобів для роботи з мультимедіа. Вони забезпечують відтворення аудіоінформації, що записана на компакт-диску, дають змогу працювати з аудіо- та відеоданими, які розташовані на веб-сервері, підтримують завантаження таких даних у потоковому режимі, надають низку додаткових можливостей.
  • Окрім формату Windows Media ця технологія підтримує формати WAV, AVI, MIDI, MPEG, VOD, AIFF, MPS.

16 of 27

ВИКОРИСТАННЯ МУЛЬТИМЕДІА НА ВЕБ-СТОРІНКАХ

  • Вставлення фонового звуку:

17 of 27

ПОСИЛАННЯ НА ВІДЕОФАЙЛИ

18 of 27

РОЗМІЩЕННЯ ЗВУКОВОГО ФАЙЛУ

19 of 27

РОЗМІЩЕННЯ ЗВУКОВОГО ФАЙЛУ

20 of 27

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

Розділ 3 § 18

HTML тег <source> використовується для вказівки кількох медіа-файлів (зазвичай різних форматів) для таких медіа-елементів як:

Це дозволяє браузеру вибрати той формат медіа який він підтримує. Також цей тег додає зображення для контейнера <picture>.

<video>

<audio>

10�(11)

21 of 27

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

Розділ 3 § 18

Коли елемент <source> розташовується всередині:

<audio>

<video>

Він повинен йти після медійних файлів, але до <track>.

Синтакс:

<audio>

<source src="URL">

</audio>

<video>

<source src="URL">

</video>

10�(11)

22 of 27

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

Розділ 3 § 18

Атрибути тегу <source>:

media

Визначає пристрій, для якого буде відтворюватися файл.

sizes

Задає розміри зображень для різних макетів сторінки.

src

Адреса медіа-файлу.

srcset

Зображення, які використовуються в різних ситуаціях (для екранів планшетів, для ретина екранів і ін.).

type

MIME-тип медійного джерела.

10�(11)

23 of 27

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

Розділ 3 § 18

Приклад використання тегу <source>:

10�(11)

24 of 27

HTML тег <track>

Розділ 3 § 18

HTML тег <track> дозволяє авторам вказати текстову доріжку для медійних елементів:

<video>

<audio>

Цей елемент використовується для відображення текстових субтитрів на різних мовах, коментарів, заголовків та т.п., що буде відображено при відтворенні media.

10�(11)

25 of 27

HTML тег <track>

Розділ 3 § 18

Синтакс:

<audio>

<video>

<audio>

<track kind | src | srclang | label | default>

</audio>

<video>

<track kind | src | srclang | label | default>

</video>

10�(11)

26 of 27

HTML тег <track>

Розділ 3 § 18

Атрибути тегу <track>:

default

Доріжка без задання. Тільки одна доріжка може мати атрибут default

kind

Вказує тип доріжки

label

Назва доріжки для відображення. Якщо цей атрибут не вказаний, браузер стане використовувати значення, яке застосовується у нього без задання.

src

Шлях до файлу з доріжкою

srclang

Мова доріжки

10�(11)

27 of 27

HTML тег <track>

Розділ 3 § 18

Приклад використання тегу <track>:

10�(11)