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

Модуль «Веб-технології»

Урок 20

​

Пригадаємо

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

Пригадаємо

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

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

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

Приклад

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

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

Типи MIME-форматів мультимедійних�файлів, які підтримуються браузерами �

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

HTML5-відео

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

HTML5-аудіо

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

​

​

Основні атрибути тегів <video> та <audio>

Приклад вбудовування відео на веб-сторінку

<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>

​

Приклад вбудовування аудіо на веб-сторінку

<audio controls>

<source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">

<source src="audio/music.mp3" type="audio/mpeg">

</audio>

Зауваження

З огляду на стандарти розробки сайтів варто створити в теці Сайт додаткову теку video (audio), де розмістити відконвертовані відео- чи аудіофайли.

В елементі <video> (<audio>) краще використовувати атрибут controls, який відповідає за відображення елементів керування плеєром.

Хоча елементи <video> (<audio>) мають атрибути width та height, логічно оголошувати розмір у таблицях стилів (нагадаємо, що стандарт html5 відповідає лише за семантичну розмітку)

​

​

Цікаво

До появи стандарту HTML5-відео використовувався елемент <embed>, який визначає контейнер для зовнішнього застосування або інтерактивного вмісту (іншими словами, плагіна).

<embed> - непарний тег, і не може містити альтернативний текст

�Всі основні браузери протягом довгого часу підтримували цей елемент.

Проте даний тег додали лише в специфікацію HTML5.

Приклад: <embed width=“400” src=“anima.swf”>

�

Завдання для самостійного виконання

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

Додайте на другу сторінку після графічного об’єкта аудіофайл.

​

Результат надішліть учителю �

Аналізуємо. Обговорюємо

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

Домашнє завдання

Використовуючи тег <embed> додайте будь-який флеш-ролик на третю сторінку завдання до уроку 17

(як допомогу перегляньте відео https://www.youtube.com/watch?v=�i_l4X2K6PbE) �