Урок "Розміщення на веб-сторінках аудіо-файлів і настроювання параметрів їх програвання. Вставляння відеофайлів і настроювання параметрів їхнього відтворення."

Тема: Розміщення на веб-сторінках аудіо-файлів і настроювання параметрів їх програвання. Вставляння відеофайлів і настроювання параметрів їхнього відтворення. Відтворення аудіо- та відеофайлів в онлайновому режимі.

Мета:

• навчальна: Ознайомити учнів з pозміщенням на веб-сторінках аудіофайлів і настроюванням параметрів їх відтворення; формати відеофайлів, їхні особливості; вставлянням відеофайлів і настроюванням параметрів їхнього відтворення; відтворенням аудіо- та відеофайлів в онлайновому режимі.
• розвиваюча: Розвивати логічне мислення, самостійність, вміння застосовувати набуті знання до практичних завдань.
• виховна: Виховувати наполегливість, естетичність у оформленні, грамотно висловлювати свої думки.

Тип уроку: Засвоєння нових знань і навичок.

Матеріали для роботи з учнями:

Пасічник О.В., Пасічник О.Г. Основи веб-дизайну. Навч.посібник. - К.: Вид.група BHV, 2009.

Мультимедійне обладнання;

Презентація “Структура веб-сайтів, різновиди веб-сторінок”.

 

План

1. Організація початку уроку

2. Правила ТБ при роботі в кабінеті Інформатики.

3. Мотивація навчальної діяльності.

4. Актуалізація опорних знань.

5. Вивчення нового матеріалу.

6. Застосування знань.

7. Підсумки уроку.

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

 

Хід уроку

1. Організація початку уроку.

2. Інструктаж БЖД.

3. Актуалізація опорних знань.

4. Мотивація навчальної діяльності.

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

5. Вивчення нового матеріалу.

Формати аудіо- та відеофайлів

Щоб зберегти звук чи відеоряд у файлі, його потрібно закодувати. Спосіб кодування визначається форматом файлу, а програмний модуль, який здійснює кодування (що, як правило, супроводжується стисканням) та розкодування, називають кодеком. Розглянемо детальніше поширені формати аудіо- та відео файлів.

Формати відеофайлів

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

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

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

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

Формати аудіофайлів

У сучасних умовах для записування і відтворення звуку найчастіше використовують формати WAV, AJFF, MIDI, МРЗ. Розглянемо деякі з них.

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

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

 

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

Технології та засоби відтворення мультимедіа

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

Приймання потокових мультимедійних даних має кілька переваг порівняно зі звичайним завантаженням файлів з веб-сервера.

● Негайне відтворення. У разі приймання інформації в потоковому режимі фрагмент даних відтворюється відразу після його отримання.

● Можливість передавання поточних подій. Передавання даних у потоковому режимі зручно використовувати, наприклад, для новин або репортажів зі спортивних змагань.

● Можливість передавання великих обсягів даних. У потоковому передаванні даних не діють обмеження на довжину файлу, що передається.

Однак у цьому випадку копії мультимедійного файлу на комп'ютері створено не буде, і для його повторного відтворення потрібно знову зв'язуватися з відповідним веб-сервером.

Наразі поширеними є такі потокові технології.

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

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

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

Однією 3 найпопулярніших програм відтворення мультимедійних даних є Програвач Windows Media (Windows Media Player). Це універсальний програвач для прослуховування аудіо- та перегляду відеофайлів більшості популярних форматів. Файли можуть міститися як на комп'ютері чи компакт-дисках, так і на веб-сторінках. Як і у вікнах більшості Windows-програм, у вікні програвача Windows Media (рис. 3.19) є меню, область відображення, панелі задач та керування, рядок стану.

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

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

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

Internet Explorer може завантажувати та відтворювати фоновий звук, для прослуховування якого не потрібно виконувати жодних дій. Звук зберігається у файлі. Для вставлення фонового звуку використовують тег такого формату:

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

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

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

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

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

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

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

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

<А HREF= " school. avi " >Bідеокліп про школу (600 К)</А>

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

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

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

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

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

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

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

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

● ALIGN (набуває значень left, 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>

Ha рис. 3.20 показано веб-сторінку, яка містить вбудовану в такий спосіб панель програвача.

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

<OBJECT DATA = ”pryklad.rap3” TYPE = ”audio/wav”></OBJECT>

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

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

● WIDTH — ширина;

● HEIGHT — висота;

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

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

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

<OBJECT DATA="1.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 має великий розмір, відвідувач побачить повідомлення про те, що відбувається завантаження.

6. Застосування отриманих знань

Самостійна робота

1. Створіть веб-сторінку з таблицею, у комірках якої розмістіть зображення у шаховому порядку. Межі таблиці зробіть невидимими.

2. Створіть такі веб-сторінки:

● з картою гіперпосилань у вигляді зображення зоряного неба з кількома сузір'ями;

● з описом кожного сузір'я.

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

3. Створіть веб-сторінку з описом певної країни, тлом документа зробіть зображення прапора цієї країни, підберіть та настройте фонову мелодію.

7.  ПІДБИТТЯ ПІДСУМКІВ УРОКУ

Тест до теми

1. Зробити малюнок тлом веб-сторінки можна за допомогою тегу:

а) <BODY BACKGROUND="URL-aflpeca графічного файлу">;

б) <IMG SRC—''URL-адреса графічного файлу">;

в) <BODY IMG SRC-''URL-адреса графічного файлу">;

г) <IMG BACKGROUND-UrRL-адреса графічного файлу">;

д) <BODY BGCOLOR="URL-адреса графічного файлу">.

2.  Розмістити на веб-сторінці малюнок можна за допомогою тегу:

а)  <BODY BACKGROUND="URL-апреса графічного файлу">;

б)  <IMG SRC="URL-адреса графічного файлу">;

в)  <BODY IMG SRC="URL-адреса графічного файлу">;

г)  <BODY BGCOLOR-'URL-адреса графічного файлу">;

д)  <IMG BACKGROUND-UrRL-адреса графічного файлу">.

3. URL-адресу файлу зображення задають за допомогою атрибута:

а) SRC;

б) HREF;

в) IMG;

г)  BACKGROUND;

д) BODY.

4.  Висоту та ширину графічного об'єкта, розміщеного на веб-сто- рінці, можна задати:

а)   у дужках після URL-адреси файлу зображення;

б)   за допомогою атрибутів WIDTH та HEIGHT у тегу IMG;

в)   за допомогою атрибута ALT;

г)   за допомогою атрибута SRC;

д)   за допомогою атрибутів WIDTH та HEIGHT у тегу BODY.

5. Малюнок 1.jpg можна перетворити на гіперпосилання на веб-

сторінку 1.html за допомогою коду:

а) <А HREF="l.html"><IMG SRC = "1.jpg"></A>;

б) <А HREF="1.jpg"><IMG SRC = "1.html"></A>;

в) <A HREF = "l.jpg"><IMG SRC = "l.html" NAME=”1.jpg”></A>;

r) <A HREF = "l.jpg"><IMG SRC = "l.jpg" NAME="l.html"></A>;

д) <A HREF=" 1 .jpg"><IMG NAME="1.html"></A>,

6.  Графічна карта посилань — це:

а)   зображення карти певної місцевості на веб-сторінці;

б)   схема розміщення всіх гіперпосилань на сторінках вебсайту;

в)   велике зображення, повністю поділене на області-гіперпо- силання;

г)   веб-сторінка, поділена на комірки певної конфігурації;

д) одне графічне зображення, використане для визначення кількох гіперпосилань.

7. Атрибут USEMAP у тегу <IMG>:

а)   задає URL-адресу зображення для використання його як карти посилань;

б)  визначає ім'я карти посилань;

в)   задає адресу для гіперпосилання, пов'язаного з областю карти;

г)   визначає тип області карти гіперпосилань;

д)   має збігатися зі значенням атрибута NAME у тегу <МАР>.

8.  Гарячі області карти посилань — це:

а)   ділянки визначеної форми у зображенні карти, що є гіпер- посиланнями;

б)   веб-сторінки, пов'язані з картою гіперпосилань;

в)   пояснювальний текст під картою посилань;

г)   частини малюнка, пов'язані з іншими веб-сторінками;

д)   назви інших веб-сторінок, що пов'язані з картою гіперпо- силань.

9. Атрибутами тегу <AREA> є:

а) HREF, SHAPE, COORDS;

б) RECT, POLYGONE, CIRCLE;

в) USEMAP , NAME;

г) SHAPE, RECT, POLYGONE, CIRCLE;

д) HREF, USEMAP, NAME.

10.До форматів мультимедійних даних належать:

а) .avi, .mov, .mpeg, .wav;

б)  .gif, .jpg, .png;

в) .html, .mp3;

г) .avi, .mov, .html;

д) .ra, .ram, .rm, .rmm, .rmd.

11.Фоновий звук для веб-сторінки можна задати за допомогою коду:

а)   <А HREF="1.qt">Myзикa</A>;

б)   < EMBED SRC="1.html">Meлoдiя</ EMBED> ;

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

г)   <А NAME="1.qt">Myзикa</A> ;

д)<BGSOUND HREF="URL-адреса звукового файлу" LOOP=Kiлькість_відтвopень>.

12. Тег <IMG SRC="1.jpg" DYNSRC="audio.wav" START=MOUSEOVER LOOP=7>:

а)   вставляє малюнок як гіперпосилання;

б) виводить картинку, після наведення на яку вказівника миші починається відтворення відеокліпу;

в)   задає розміри певного зображення;

г)  дає змогу розмістити панель програвача звукових файлів для відтворення файлу audio.wav;

д)  визначає відтворення звукового файлу audio.wav зазначену кількість разів після наведення вказівника миші на зображення 1.jpg.

8. ДОМАШНЄ ЗАВДАННЯ

1. Вивчити конспект.

2. Виконати завдання 3.2.