Урок 24-25. Мультимедійні дані

Розміщення та відтворення на веб-сторінках мультимедійних даних

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

<BGSOUND SRC="URL звукового файлу" LOOP=кількість відтворень>

Атрибут LOOP може набувати значень:

• true — повторення звуку доти, доки сторінка відображається на екрані;

• false — відтворення звукового файлу один раз;

• число — кількість відтворень.

Наприклад: <BGSOUND SRC="fonzvuk.au" LOOP=3>.

У HTML-документах можна також використовувати посилання на звукові та відеофайли, які відтворюватимуться лише у разі вибору цих посилань. Окрім цього, є спеціальний тег для розміщення панелі програвача на сторінці відразу після її завантаження у браузер. Однак слід пам'ятати, що мультимедійні файли можуть бути великими за обсягом, потребувати багато часу для завантаження, тому бажано повідомляти відвідувачів про розміри аудіо- та відео- записів, щоб вони вирішили, чи варто витрачати свій час.

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

Якщо, наприклад, у поточній папці є файл кліпу school.avi, то посилання на нього можна задати так:

<А HREF="school.avi">Biдeoклiп про школу (600 К)</А>

Після клацання мишею гіперпосилання та надання дозволу на відкривання файлу з'явиться вікно програвана для відтворення цього відеокліпу.

Атрибут DYNSRC (DYNSRC=”URL адреса відео-об’єкта”) тегу <IMG> дає змогу вбудовувати відео у такий спосіб: на веб-сторінці міститься картинка, після наведення на яку вказівника миші починається відтворення відеокліпу. Наприклад:

<IMG SRC = " l.jpg " DYNSRC="video.avi" START=MOUSEOVER L00P=7>

Атрибути:

CONTROLS - Цей атрибут керує переглядом відео- кліпу. Якщо він присутній, то кліп стартує по команді користувача.

START = Задає умову початку програвання звукового файу, заданого атрибутом DYNSRC=. Його значення можуть бути наступними:

• FILEOPEN - Розпочати програвання як тільки завершиться завантаження (виконується по замовчуванню).
• MOUSEOVER - Розпочати програвання після вказівки мишкою користувачем.

WIDTH=n - задає розміри довжини вікна прокрутки відео- кліпу;

HEIGHT=n - задає розміри ширини вікна прокрутки відео- кліпу;

ALIGN=... - задає розташування відео- кліпу (right, left, center).

LOOP=n.

Приклад:

<IMG DYNSRC="video.flv" START=MOUSEOVER LOOP=1 WIDTH=300 HEIGHT=200 ALIGN=left>

Розглянемо приклад розміщення звукового файлу audio.wav за допомогою тегу <EMBED>, який дає змогу розмістити на веб-сторінці спеціальну панель програвача мультимедійних файлів. Для цього використовують теги <EMBED SRC=. . .></EMBED>, наприклад, так:

<EMBED SRC="audio.wav"></EMBED>

Файл audio.wav у цьому прикладі має бути збережений у поточній папці (тій самій, що й HTML-документ). 

Тег <EMBED> може мати такі атрибути:

• SRC (значення — URL-адреса) — адреса кліпу;

• ALIGN (набуває значень l e f t , right, top, middle, bottom) — вирівнювання панелі програвача щодо тексту;

• WIDTH (у пікселах) — ширина програвача;

• HEIGHT (у пікселах) — висота програвача;

• AUTOSTART (набуває значень true або false) — настроювання автоматичного запуску після завантаження;

• REPEAT (значення true або false) — настроювання повторного програвання;

• PLAY_LOOP — кількість повторень;

• HIDDEN (значення true або false) — показати або приховати панель.

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

<EMBED SRC="filename.avi" WIDTH="300" HEIGHT="160" AUTOSTART="true" REPEAT="false" ALIGN="left"></EMBED>

Інший спосіб розміщення мультимедійного об'єкта на сторінці — це застосування більш універсального тегу <OBJECT>.

Наприклад: <OBJECT DATA="pryklad.rap3" TYPE="audio/wav"></OBJECT>

Атрибут DATA задає URL-адресу відтворюваного файлу, атрибут TYPE визначає його формат. Для тегу <OBJECT> можна використовувати ще такі атрибути:

• ALIGN — вирівнювання відносно тексту;

• WIDTH — ширина;

• HEIGHT — висота;

• HSPACE — відступ по горизонталі;

• VSPACE — відступ по вертикалі.

Як і в попередньому прикладі, об'єкт можна бачити на екрані зазвичай у вигляді вбудованого програвача з елементами керування. 

Можна також вкладати кілька елементів <OBJECT> один в один.

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

Наприклад, можна написати так:

<OBJECT DATA="l.mpg" TYPE="video/x-mpeg">

<OBJECT DATA="2.aiff" TYPE="audio/x-aiff">

<OBJECT DATA="3.tiff" TYPE="image/tiff">

<OBJECT DATA="4.gif" TYPE="image/gif">Кліп</OBJECT>

</OBJECT>

</OBJECT>

</OBJECT>

У цьому прикладі браузер спочатку спробує відтворити відеокліп (файл у форматі MPEG). Якщо ця спроба буде вдалою, то все, що міститься всередині зовнішнього тегу <OBJECT>, браузер зігнорує, а якщо ні — спробує відтворити файл у форматі AIFF. Якщо відсутній модуль відтворення і для цього файлу, буде спроба відтворити малюнок у форматі TIFF, а в разі невдачі — зображення формату GIF. Зрештою залишиться просто текст: «Кліп».

У тегу <OBJECT> можна задати атрибут STANDBY, значення якого (текстовий рядок) відображатиметься на екрані доти, доки не завантажиться весь об'єкт. Наприклад, доцільно написати так:

<OBJECT DATA="l.wav" TYPE="audio/wav" STANDBY="Ifle завантаження. Зачекайте.">

Якщо файл 1.wav має великий розмір, відвідувач побачить повідомлення про те, що відбувається завантаження.

Рухомий текстовий рядок

<marquee>...</marquee>

Behavior= поведінка рядка (Scroll - звичайна прокрутка, Slide - рядок добігає до кінця і зупиняється, Alternate - рядок рухатиметься від краю до краю).

<marquee height=30 width=900><font color=red><h1 align=center>Привіт! Це мій перший сайт!</h1></font></marquee><br>