18 травня о 18:00Вебінар: Інтерактивний урок математики: алгоритми та приклади створення дидактичних матеріалів

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

Про матеріал
Урок з інформатики для 9-11класів на тему "Елементи мультимедіа в HTML.Розміщення на веб-сторінках аудіо та відео-файлів"
Перегляд файлу

Урок №60

Елементи мультимедіа в HTML.

Розміщення на веб-сторінках

аудіо та відео-файлів

Мультимедіа в Інтернеті - це звук, музика, відео, фільми та анімація.

Що таке мультимедіа?

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

Приклади: зображення, музика, звук, відео, записи, фільми, анімація тощо.

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

У цьому розділі ви дізнаєтеся про різні мультимедійні формати.

Підтримка браузера

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

Пізніше з'явилися браузери з підтримкою кольорів і шрифтів і зображень!

Останні браузери обробляють аудіо, відео та анімацію. Підтримуються різні формати, а для деяких форматів потрібні додаткові допоміжні програми (плагіни) для роботи.

Формати мультимедіа

Мультимедійні елементи (наприклад, аудіо чи відео) зберігаються у медіафайлах.

Найпоширенішим способом виявлення типу файлу є перегляд розширення файлу.

Мультимедійні файли мають різні формати, такі як: .swf, .wav, .mp3, .mp4, .mpg, .wmv і .avi.

Загальні формати відео

Відеоформати

MP4 - це новий і майбутній формат інтернет-відео. 

YouTube рекомендує MP4. 

MP4 підтримується Flash Player. 

MP4 підтримується HTML5. 

 

Тільки відео MP4, WebM і Ogg підтримуються стандартом HTML5.

Формати аудіо

MP3 - найновіший формат для записаної музики. Термін MP3 став синонімом цифрової музики.

Якщо на вашому веб-сайті потрібно використати музику, то MP3 є найоптимальнішим вибором.

Тільки MP3, WAV і Ogg аудіо підтримуються стандартом HTML5.

 

Відео HTML5

Приклад HTML відео Big Buck Bunny .

<!DOCTYPE html>

<html>

<body>

 

<video width="400" controls>

    <source src="mov_bbb.mp4" type="video/mp4">

  <source src="mov_bbb.ogg" type="video/ogg">

    Ваш веб-переглядач не підтримує тег відео в HTML5

</video>

 

<p>

Відео люб’язно надане

<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.

</p>

 

</body>

</html>

Спробуйте самі »


Відтворення відео в HTML

 HTML5 відео можна відтворювати лише у веб-переглядачі з плагіном (наприклад, flash).

Елемент HTML5 <video> - вказує на стандартний спосіб вбудовування відео на веб-сторінку.

Елемент HTML <video>

Щоб показати відео в HTML, використовуйте тег <video>:

Приклад

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Ваш браузер не підтримує тег відео в HTML5 </video>

Спробуйте самі »

Як це працює

Controls - атрибут додає елементи управління відео такі, як відтворення, пауза, і обсяг.

Гарна ідея завжди включати width і height - атрибути. Якщо висоту та ширину не встановлено, сторінка може мінятися під час завантаження відео.

<source> - Елемент дозволяє вказати альтернативні відео файли, які браузер може вибрати. Браузер використовуватиме перший розпізнаний формат.

Текст між тегами <video> і </video> - тегами буде відображатися лише в браузерах, які не підтримують цей <video> елемент.


HTML <video> Автозапуск

Щоб розпочати відео, автоматично використовуйте autoplay атрибут:

Приклад

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Спробуйте самі »

Атрибут автозапуску не працює в мобільних пристроях, таких як iPad і iPhone.


HTML відео - підтримка браузера

У HTML5 є три підтримуваних відеоформати: MP4, WebM і Ogg.

Підтримка веб-переглядача для різних форматів:

Browser

MP4

WebM

Ogg

Internet Explorer

+

-

-

Chrome

+

+

+

Firefox

+

+

+

Safari

+

-

-

Opera

+ (Opera 25)

+

+

HTML відео - типи носіїв

File Format

Media Type

MP4

video/mp4

WebM

video/webm

Ogg

video/ogg

 

Теги відео HTML5

Tag

визначення

<video>

визначає відео чи фільм

<source>

Визначає кілька мультимедійних ресурсів для мультимедійних елементів, таких як <video> і <audio>

<track>

Визначає текстові доріжки в медіаплеєрах

 

Аудіо HTML5

Аудіо в Інтернеті

Перед HTML5 аудіофайли можна відтворювати лише в браузері з плагіном (наприклад, flash).

Елемент HTML5 <audio> визначає стандартний спосіб вбудовування аудіо в веб-сторінку.

HTML <audio> Елемент

Щоб відтворити аудіофайл у HTML, використовуйте теги <audio> елемент:

Приклад

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
Ваш браузер не підтримує даний аудіо-формат
</audio>

Спробуйте самі »


HTML Аудіо - Як це працює?

Controls - атрибут додає елементи управління аудіо, як відтворення, пауза, і обсяг.

<source> - Елемент дозволяє вказати альтернативні звукові файли , які браузер може вибрати. Браузер використовуватиме перший розпізнаний формат.

Текст між тегами <audio>  і </audio> тегами буде відображатися лише в браузерах, які не підтримують цей <audio> елемент.

HTML аудіо - підтримка браузера

У HTML5 є 3 підтримуваних аудіоформати: MP3, WAV і OGG.

Підтримка веб-переглядача для різних форматів: 

Browser

MP3

WAV

OGG

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

YES

YES

YES

Safari

YES

YES

NO

Opera

YES

YES

YES


Типи аудіо-медіа HTML

File Format

Media Type

MP3

audio/mpeg

OGG

audio/ogg

WAV

audio/wav

Теги аудіофайлів HTML5

тег

визначення

<audio>

Визначає аудіо-файл

<source>

Визначає кілька мультимедійних ресурсів для мультимедійних елементів, таких як <video> і <audio>

 

Додатки HTML

Метою плагіна є розширення функціональності веб-браузера.

Довідники HTML (плагіни)

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

Прикладами відомих плагінів є елементи Java.

Плагіни можна додавати до веб-сторінок з <object> тегом або <embed> тегом. 

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

Щоб відобразити відео та аудіо: використовуйте теги <video> та <audio>.


Елемент <object>

<object> - елемент підтримується всіма браузерами.

<object> - елемент визначає вбудований об'єкт всередині HTML - документа.

Він використовується для вбудовування плагінів (наприклад, Java, читачів PDF, Flash-плеєрів) у веб-сторінки.

Приклад

<object width="400" height="50" data="bookmark.swf"> </object>

Спробуйте самі »

<object> - елемент також може бути використаний для включення HTML в HTML:

Приклад

<object width="100%" height="500px" data="snippet.html"></object>

Спробуйте самі »

Або зображення, якщо потрібно:

Приклад

<object data="audi.jpeg"></object>

Спробуйте самі »


Елемент <embed>

<embed> - елемент підтримується у всіх основних браузерах.

<embed> - елемент також визначає вбудований об'єкт всередині HTML - документа.

Веб-браузери довго підтримували елемент <embed>. Проте вона не є частиною специфікації HTML перед HTML5.

Приклад

<embed width="400" height="50" src="bookmark.swf">

Спробуйте самі »

Зауважте, що елемент <embed> не має закриваючого тега. Він не може містити альтернативний текст.

<embed> - елемент також може бути використаний для включення HTML в HTML:

Приклад

<embed width="100%" height="500px" src="snippet.html">

Спробуйте самі »

Або зображення, якщо потрібно:

Приклад

<embed src="audi.jpeg">

Спробуйте самі »

 

HTML YouTube Відео

Найпростішим способом відтворення відео в HTML є використання YouTube.

Вам доведеться конвертувати відео в різні формати, щоб зробити їх відтворенням у всіх браузерах.

Перетворення відео в різні формати може бути важким і тривалим.

Більш просте рішення - дозволити YouTube відтворити відео на вашій веб-сторінці.

Ідентифікатор відео YouTube

YouTube відображатиме ідентифікатор (наприклад, tgbNymZ7vqY) під час збереження (або відтворення) відео.

Ви можете використовувати цей ідентифікатор і посилатися на своє відео в HTML-коді.

Можна скористатися готовим кодом вставки відео з YouTube:

  1. Вибрати необхідне відео
  2. Натиснути на необхідному відео праву кнопку миші
  3. В контекстному меню до даного відео вибрати команду «Скопіювати код вставки»
  4. Вставити даний код в код на своїй веб-сторінці

Приклад коду

<iframe width="853" height="480" src="https://www.youtube.com/embed/ITub7NYgY2Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Або без налаштувань

<iframe width="250" height="200" src="https://www.youtube.com/embed/ITub7NYgY2Y" ></iframe>

 


Відтворення відео YouTube

у форматі HTML

Щоб відтворити відео на веб-сторінці, виконайте наведені нижче дії.

  • Завантажте відео на YouTube
  • Зверніть увагу на ідентифікатор відео
  • Визначте елемент <iframe> у вашій веб-сторінці
  • Нехай атрибут src вказує на URL відео
  • Використовуйте атрибути width і height, щоб визначити розмірність програвача
  • Додайте до URL інші параметри (див. Нижче)

Приклад - використання iFrame (рекомендовано)

<iframe width="420" height="315"
    src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

Спробуйте самі »

Автозапуск YouTube

Ви можете автоматично відтворити своє відео, коли користувач відвідає цю сторінку, додавши простий параметр до URL-адреси YouTube.

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

Значення 0 (за замовчуванням): відео не відтворюється автоматично під час завантаження програвача.

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

YouTube - автозапуск

<iframe width="420" height="315"
  src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>

Спробуйте самі »



Список відтворення YouTube

Розділений комами список відео для відтворення (на додаток до вихідної URL-адреси).

Петля YouTube

Значення 0 (за замовчуванням): відео буде відтворюватися лише один раз.

Значення 1: відео буде припинено (назавжди).

YouTube - Петля

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

Спробуйте самі »

Керування YouTube

Значення 0: не відображаються елементи керування програвачем.

Значення 1 (за замовчуванням): програвач керує відображенням.

YouTube - елементи керування

<iframe width="420" height="315"
    src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>

Спробуйте самі »

YouTube - Використовуючи <object> або <embed>

Примітка. YouTube <object>і <embed>знято з січня 2015 р. Необхідно конвертувати відео для використання <iframe>.

Приклад - Використання <object> (застарілий)

<object width="420" height="315"
data="https://www.youtube.com/embed/tgbNymZ7vqY">
</object>

Спробуйте самі »

Приклад - використання <embed> (застаріле)

<embed width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">

Спробуйте самі »

 

 

 

 

ПРАКТИЧНА ЧАСТИНА

Вправа1

  1. Відкрийте Notepad++, створіть новий документ «Index.html» і збережіть його в папку «Урок №60».
  2.  Створіть веб-сторінку і розмістіть на ній:
  1. Аудіо файл з альтернативним текстом
  2. Відео-файл з автозапуском (може працювати неправильно або неспрацювати через несумісність з веб-програвачем) і альтернативним текстом;
  3. Відео-файл з атрибутом керування і альтернативним текстом;
  4. Відеофайл з YouTube.
  1. Файли для роботи можна завантажити з сайту ІнформатикаЗОШ19/11(ІКТ)/Матеріали до уроку №60 або з папки Мережа.
  2. Оформіть веб-сторінку на власний смак: додайте заголовки, підписи, посилання, кнопки, фонове заповнення (колір або картинка), зображення і т.д…
  3. Збережіть свою роботу і перегляньте результат у браузері (Run -> https://lh3.googleusercontent.com/4IomFtlOaleLklwW38LjzJXFAiKpq54HN0LKNThR8AzZU6Z2Jyna1hFdrSu60f8yclbhpjQLNA4HTULktXznOK2AmylTCxco0efld3LHw8anmdNmPlDPdGY2BnLo3nL4RGOxrn5TPLigWv_UUg).
  4. Внесіть, за необхідністю, корективи і продемонструйте роботу вчителеві.

 

Приклад (без оформлення) – (7балів)

Середня оцінка розробки
Структурованість
4.8
Оригінальність викладу
4.4
Відповідність темі
5.0
Загальна:
4.7
Всього відгуків: 5
Оцінки та відгуки
  1. Ткаченко Валентина
    Загальна:
    4.7
    Структурованість
    4.0
    Оригінальність викладу
    5.0
    Відповідність темі
    5.0
  2. Єльцова Тетяна Олександрівна
    Дуже дякую, стала у приході мені ця розробка.
    Загальна:
    4.7
    Структурованість
    5.0
    Оригінальність викладу
    4.0
    Відповідність темі
    5.0
  3. Скомарівський Олег
    Загальна:
    4.3
    Структурованість
    5.0
    Оригінальність викладу
    3.0
    Відповідність темі
    5.0
  4. Аркадій Панченко
    Загальна:
    5.0
    Структурованість
    5.0
    Оригінальність викладу
    5.0
    Відповідність темі
    5.0
  5. Белейчик Андрій Володимирович
    Загальна:
    5.0
    Структурованість
    5.0
    Оригінальність викладу
    5.0
    Відповідність темі
    5.0
Показати ще 2 відгука
docx
Додано
15 лютого 2019
Переглядів
9941
Оцінка розробки
4.7 (5 відгуків)
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку