| Порівняння попередніх версій Попередня ревізія Наступна ревізія | Попередня ревізія |
| subjects:basic:informatika:web:multymedia_na_veb-storinkah [07.11.2022 02:11] – Адміністратор | subjects:basic:informatika:web:multymedia_na_veb-storinkah [07.11.2022 02:45] (поточний) – [Джерела] Адміністратор |
|---|
| **Поширені формати відео** | **Поширені формати відео** |
| |
| ^ Формат ^ Розширення файлу | Опис | | ^ Формат ^ Розширення файлу ^ Опис ^ |
| | MPEG | .mpg\\ .mpeg | MPEG. Розроблено Moving Pictures Expert Group. Перший популярний формат відео в Інтернеті. Більше не підтримується в HTML. | | | MPEG | .mpg\\ .mpeg | MPEG. Розроблено Moving Pictures Expert Group. Перший популярний формат відео в Інтернеті. Більше не підтримується в HTML. | |
| | AVI | .avi | AVI (англ. Audio Video Interleave, що буквально можна перекласти як "чергування аудіо та відео") — мультимедійний контейнер для аудіо-відео даних. Добре відтворюється на комп’ютерах Windows, але не у веб-браузерах. | | | AVI | .avi | AVI (англ. Audio Video Interleave, що буквально можна перекласти як "чергування аудіо та відео") — мультимедійний контейнер для аудіо-відео даних. Добре відтворюється на комп’ютерах Windows, але не у веб-браузерах. | |
| **Поширені аудіоформати**\\ | **Поширені аудіоформати**\\ |
| MP3 є найкращим форматом для стиснутої записаної музики. Термін MP3 став синонімом цифрової музики. Якщо ваш веб-сайт присвячений музиці, вибором буде MP3. | MP3 є найкращим форматом для стиснутої записаної музики. Термін MP3 став синонімом цифрової музики. Якщо ваш веб-сайт присвячений музиці, вибором буде MP3. |
| ^ Формат ^ Розширення файлу | Опис | | ^ Формат ^ Розширення файлу ^ Опис ^ |
| | MIDI | .mpg\\ .mpeg | MPEG. Розроблено Moving Pictures Expert Group. Перший популярний формат відео в Інтернеті. Більше не підтримується в HTML. | | | MIDI | .mid\\ .midi | MIDI (цифровий інтерфейс музичних інструментів). Основний формат для всіх електронних музичних пристроїв, таких як синтезатори та звукові карти ПК. Файли MIDI містять не звук, а цифрові ноти, які можуть відтворюватися електронікою. Добре відтворюється на всіх комп’ютерах і музичному обладнанні, але не у веб-браузерах. | |
| | AVI | .avi | AVI (англ. Audio Video Interleave, що буквально можна перекласти як "чергування аудіо та відео") — мультимедійний контейнер для аудіо-відео даних. Добре відтворюється на комп’ютерах Windows, але не у веб-браузерах. | | | RealAudio | .rm\\ .ram | Розроблено Real Media для потокового передавання аудіо з низькою пропускною здатністю. Не відтворюється у веб-браузерах. | |
| | WMV | .wmv | WMV (Windows Media Video). Розроблено Microsoft. Зазвичай використовується у відеокамерах і телевізійному обладнанні. Добре відтворюється на комп’ютерах Windows, але не у веб-браузерах. | | | WMA | .wma | WMA (Windows Media Audio). Розроблено Microsoft. Добре відтворюється на комп’ютерах Windows, але не у веб-браузерах | |
| | QuickTime | .mov | Розроблено Apple. Зазвичай використовується у відеокамерах і телевізійному обладнанні. Добре відтворюється на комп’ютерах Apple, але не у веб-браузерах | | | AAC | .aac | AAC (Advanced Audio Coding). Розроблено Apple як стандартний формат для iTunes. Добре відтворюється на комп’ютерах Apple, але не у веб-браузерах. | |
| | RealVideo | .rm\\ .ram | Розроблено Real Media для забезпечення потокового відео з низькою пропускною здатністю. Не відтворюється у веб-браузерах. | | | WAV | .wav | Розроблено IBM і Microsoft. Добре відтворюється в операційних системах Windows, Macintosh і Linux. Підтримується HTML | |
| | Flash | .swf\\ .flv | Застаріла мультимедійна та програмна платформа використовувана для авторської розробки векторної графіки, анімації, ігор і насичених інтернет-застосунків (RIA), які можна переглядати, програвати чи виконувати в Adobe Flash Player. | | | Ogg | .ogg | Розроблено Xiph.Org Foundation. Підтримується HTML | |
| | Ogg | .ogg | Розроблено Xiph.Org Foundation. Підтримується HTML | | | MP3 | .mp3 | Файли MP3 насправді є звуковою частиною файлів MPEG. MP3 є найпопулярнішим форматом для музичних плеєрів. Поєднує гарне стиснення (невеликі файли) з високою якістю. Підтримується всіма браузерами. | |
| | WebM | .webm | Розроблено Mozilla, Opera, Adobe і Google. Підтримується HTML | | | MP4 | .mp4 | MP4 — це формат відео, але його також можна використовувати для аудіо. Підтримується всіма браузерами | |
| | MPEG-4\\ or MP4 | .mp4 | Розроблено Moving Pictures Expert Group. Зазвичай використовується у відеокамерах і телевізійному обладнанні. Підтримується всіма браузерами та рекомендовано YouTube | | |
| | <alert type="warning">**Примітка**. Стандарт HTML підтримує лише звук MP3, WAV і Ogg.</alert> |
| | |
| | ===== Елемент HTML <video> ===== |
| | HTML тег <video> добавляє, відтворює та керує відеороликом на веб-сторінці. Шлях до файлу задається через атрибут src або вкладений елемент ''<source>''. |
| | |
| | В даний час існує три формати відео, що підтимуються елементом ''<video>'': MP4, WebM та Ogg. |
| | |
| | Приклад: |
| | <code html> |
| | <video width="320" height="240" controls> |
| | <source src="movie.mp4" type="video/mp4"> |
| | <source src="movie.ogg" type="video/ogg"> |
| | Ваш браузер не підтримує тег video. |
| | </video> |
| | </code> |
| | |
| | Атрибут ''controls'' додає елементи керування відео, як-от відтворення, пауза та гучність. |
| | |
| | Рекомендується завжди включати атрибути ''width'' та ''height''. Якщо висоту та ширину не встановлено, сторінка може мерехтіти під час завантаження відео. |
| | |
| | Елемент ''<source>'' дозволяє вказати альтернативні відеофайли, які браузер може вибрати. Браузер використовуватиме перший розпізнаний формат. |
| | |
| | Текст між тегами ''<video>'' і ''</video>'' відображатиметься лише в браузерах, які не підтримують елемент ''<video>''. |
| | |
| | ===== Елемент HTML <audio> ===== |
| | HTML тег <audio> відтворює аудіозапис і керує ним на веб-сторінці. Шлях до файлу задається через атрибут src або вкладений тег ''<source>''. |
| | |
| | Приклад: |
| | <code html> |
| | <audio controls> |
| | <source src="horse.ogg" type="audio/ogg"> |
| | <source src="horse.mp3" type="audio/mpeg"> |
| | Ваш браузер не підтримує тег video. |
| | </audio> |
| | </code> |
| | |
| | Атрибут ''controls'' додає елементи керування звуком, як-от відтворення, пауза та гучність. |
| | |
| | Елемент ''<source>'' дозволяє вказати альтернативні аудіофайли, які браузер може вибрати. Браузер використовуватиме перший розпізнаний формат. |
| | |
| | Текст між тегами ''<audio>'' і ''</audio>'' відображатиметься лише в браузерах, які не підтримують елемент ''<audio>''. |
| | |
| | ===== Плагіни HTML ===== |
| | Плагіни були розроблені для використання в різних цілях: |
| | |
| | * Для запуску Java-аплетів |
| | * Для запуску елементів керування Microsoft ActiveX |
| | * Для відображення флеш-фільмів |
| | * Для відображення карт |
| | * Для сканування на віруси |
| | * Для підтвердження банківського ідентифікатора |
| | <callout type="danger" title="Увага!" icon="fa fa-warning"> |
| | Більшість браузерів більше не підтримують аплети та плагіни **Java**. |
| | |
| | Елементи керування **ActiveX** більше не підтримуються жодним браузером. |
| | |
| | У сучасних браузерах також відключено підтримку **Shockwave Flash.**</callout> |
| | |
| | ==== Елемент <object> ==== |
| | |
| | Елемент ''<object>'' підтримується всіма браузерами. Він визначає вбудований об'єкт у документ HTML. |
| | |
| | Його розроблено для вбудовування плагінів (наприклад, Java-аплетів, програм читання PDF та Flash Player) у веб-сторінки, але також можна використовувати для включення HTML чи зображень у HTML: |
| | <code html> |
| | <object width="100%" height="500px" data="snippet.html"></object> |
| | <object data="audi.jpeg"></object> |
| | </code> |
| | |
| | ==== Елемент <embed> ==== |
| | |
| | Елемент ''<embed>'' підтримується в усіх основних браузерах. Елемент ''<embed>'' також як і ''<object>'' визначає вбудований об'єкт у документ HTML. |
| | |
| | Веб-браузери вже давно підтримують цей елемент. Однак він не був частиною специфікації HTML до HTML5. |
| | |
| | Приклад: |
| | <code html><embed width="100%" height="500px" src="snippet.html"> </code> |
| | |
| | ==== HTML відео YouTube ==== |
| | Перетворення відео в різні формати може бути складним і трудомістким. Простіше рішення — дозволити YouTube відтворювати відео на вашій веб-сторінці. |
| | |
| | YouTube відображатиме ідентифікатор (наприклад, tgbNymZ7vqY), коли ви збережете (або відтворите) відео. Ви можете використовувати цей ідентифікатор і посилатися на своє відео в коді HTML. |
| | |
| | Щоб відтворити відео на веб-сторінці, виконайте такі дії: |
| | |
| | * Завантажте відео на YouTube |
| | * Зверніть увагу на ідентифікатор відео |
| | * Визначте елемент ''<iframe>'' на своїй веб-сторінці |
| | * Атрибут ''src'' вказує на URL-адресу відео |
| | * Використовуйте атрибути ширини та висоти, щоб вказати розмір програвача |
| | * Додайте будь-які інші параметри до URL-адреси (див. нижче) |
| | |
| | Приклад: |
| | <code html> |
| | <iframe width="420" height="315" src="https://www.youtube.com/embed/PTHhUE_P3YA"></iframe> |
| | </code> |
| |
| ===== Джерела ===== | ===== Джерела ===== |
| * [[https://www.w3schools.com/html/html_media.asp|HTML Multimedia]] | * [[https://www.w3schools.com/html/html_media.asp|HTML Multimedia]] |
| | * [[https://css.in.ua/html/tag/video|HTML Video]] |
| | * [[https://www.w3schools.com/html/html5_audio.asp|HTML Audio]] |
| | * [[https://www.w3schools.com/html/html_youtube.asp|HTML YouTube Videos]] |
Адміністратор