1. Аудіо та відео в Інтернеті
2. Елемент <video>
3. Підтримка декількох форматів
4. Інші параметри <video>
5. Елемент <audio>
6. Відображення текстових доріжок до відео
7. Активне навчання: Впровадження власного аудіо та відео
8. Короткий виклад
9. See also

Тепер, коли ми спокійно додаємо прості зображення на веб-сторінку, зробимо наступний крок - почнемо додавати відео та аудіоплеєри в ваші HTML-документи! У цій статті ви побачите, як це робити з елементами <Video> і <Audio> ; а на завершення подивіться, як додати титри і субтитри до ваших відео.

Передумови: Базова комп'ютерна грамотність, basic software installed , базові знання working with files , Знайомство з основами HTML (як описано в Getting started with HTML ) і Images in HTML . Завдання: Дізнатися, як вставляти відео та аудіоконтенту в веб-сторінку, а також додавати титри або субтитри до відео.

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

Веб-розробники хотіли використовувати відео та аудіо в Інтернеті протягом тривалого часу, починаючи з початку 2000-х років, коли пропускна здатність мережі стала достатньою, щоб підтримувати будь-яке відео (відеофайли набагато більше, ніж текст, або навіть зображення). На ранньому етапі базові веб-технології, такі як HTML, не мали можливості вставляти відео і аудіо в Інтернет, тому запатентовані технології (або плагіни), такі як Flash (а потім і Silverlight), стали популярними для обробки такого контенту. Така технологія працювала нормально, але у неї було багато недоліків, що включали погану роботу з функціоналом HTML і CSS, проблеми безпеки та проблеми доступності.

Самостійне виправлення вирішило б велику частину цього, якщо зроблено правильно. На щастя, кілька років по тому в специфікації HTML5 були додані такі функції, з елементами <Video> і <Audio> , І деякі нові JavaScript API для їх управління. Ми не будемо розглядати JavaScript тут - тільки необхідні основи, які можуть бути досягнуті за допомогою HTML.

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

Примітка: Перш ніж ви почнете тут, ви також повинні знати, що є чимало OVPs (Провайдерів онлайн-відео) начебто YouTube , Dailymotion і Vimeo , А таеже онлайн аудіо-провайдерів на кшталт Soundcloud . Такі компанії пропонують зручний і простий спосіб розміщення і споживання відео, тому вам не потрібно турбуватися про величезному споживанні смуги пропускання. OVP навіть зазвичай пропонують готовий код для вбудовування відео і аудіо в ваші веб-сторінки. Якщо ви підете цим шляхом, то зможете уникнути деяких труднощів, які ми обговорюємо в цій статті.

Елемент <video>

елемент <Video> дозволяє вам вставляти відео досить легко. Дуже простий приклад виглядає так:

<Video src = "rabbit320.webm" controls> <p> Ваш браузер не підтримує HTML5 відео. Використовуйте <a href="rabbit320.webm"> посилання на відео </a> для доступу. </ P> </ video>

Опис параметрів:

src

Точно так же, як для елемента <Img> , Атрибут src (source - джерело) містить шлях до відео, яке ви хочете впровадити. Він працює точно так само. controls Користувачі повинні мати можливість контролювати відтворення відео і аудіо (особливо це важливо для людей, які хворі епілепсію ). Ви повинні або використовувати атрибут controls, щоб використовувати вбудований в браузер інтерфейс управління або створити власний інтерфейс, використовуючи відповідні JavaScript API . Як мінімум, інтерфейс повинен включати спосіб запуску і зупинки медіа-носія і регулювання гучності. Параграф всередині тегів <video> Це називають резервний контент - він буде відображатися, якщо браузер, який показує сторінку, не підтримує елемент <video>, дозволяючи нам забезпечити підтримку для старих версій браузерів. Це може бути все, що ви захочете; в нашому прикладі ми надали пряме посилання на відеофайл, тому користувач може хоча б отримати до нього доступ, незалежно від того, який браузер він використовують.

Вбудоване відео буде виглядати приблизно так:

Ви можете подивитися живий приклад (Погляньте також на вихідний код ).

Підтримка декількох форматів

Присутній одна проблема з наведеним вище прикладом, яку ви, можливо, вже помітили, якщо намагалися отримати доступ до прямим посиланням вище за допомогою браузера, такого як Safari або Internet Explorer. Відео не буде грати!

Давайте коротко розглянемо термінологію. Формати, такі як MP3, MP4 і WebM, називаються форматами контейнерів. Вони містять різні частини, які становлять всю пісню або відео - наприклад, звукову доріжку, відеодоріжку (в разі відео) і метадані для опису представленого носія.

Аудіо та відео треки також знаходяться в різних форматах, наприклад:

• Контейнер WebM зазвичай завантажує звук Ogg Vorbis з відео VP8 / VP9. Підтримується в основному в Firefox і Chrome.
• Контейнер MP4 часто включає аудіо AAC або MP3 з відео H.264. Підтримується в основному в Internet Explorer і Safari.
• Більш старий контейнер Ogg має тенденцію йти з аудіо Ogg Vorbis і відео Ogg Theora. Підтримувалося головним чином в Firefox і Chrome, але була витіснена більш якісним форматом WebM.

Звуковий програвач зазвичай відтворює звукову доріжку безпосередньо, наприклад, файл MP3 або Ogg.

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

Вищезазначені формати існують для стиснення відео та аудіо в керовані файли (необроблені відео і аудіо дуже великі). Браузери містять різні Codecs , На кшталт Vorbis або H.264, які використовуються для перетворення стисненого звуку і відео в двійкові цифри і назад. Як зазначено вище, браузери, на жаль, не підтримують одні й ті ж кодеки, тому вам доведеться надати декілька файлів для кожного медіа-продукту. Якщо вам не вистачає правильного кодека для декодування носія, він просто не зможе грати.

Примітка: Можливо, вам цікаво, як склалася така ситуація. MP3 (для аудіо) і MP4 / H.264 (для відео) широко підтримуються і мають високу якість. У той же час, вони захищені патентами - американські патенти охоплюють MP3 принаймні до 2017 року, і H.264 найменше до 2027 року, тому що браузери, які не є держетель цих патентів, повинні платити величезні суми грошей для підтримки цих форматів . Крім того, багато людей уникають невільного програмного забезпечення в принципі, віддаючи перевагу відкритим формати. Ось чому ми повинні надати декілька форматів для різних браузерів.

Так як ми це зробимо? Погляньте на наступний оновлений приклад ( а також живий приклад ):

<Video controls> <source src = "rabbit320.mp4" type = "video / mp4"> <source src = "rabbit320.webm" type = "video / webm"> <p> Ваш браузер не подддержівает HTML5 відео. Ось <a href="rabbit320.mp4"> посилання на відео </a> натомість. </ P> </ video>

Тут ми вилучили атрибут src з нашого тега <video>, і замість цього включали окремі елементи <Source> , Кожен з яких посилається на власне джерело. В цьому випадку браузер пройдеться по елементам <source> і почне відтворювати перший з них, який має підтримуваний кодек. Включення джерел WebM і MP4 має бути досить для відтворення вашого відео на більшості платформ і браузерів в наші дні.

Кожен елемент <source> також має атрибут type. Він не обов'язковий, але рекомендується його включати - він містить MIME types відеофайлу, браузери можуть прочитати їх і відразу ж пропустити відео, які вони не розуміють. Якщо type не включений, браузери завантажують і намагаються відтворити кожен файл до тих пір, поки не знайдуть той, який буде працювати, витрачаючи більше часу і ресурсів.

Інші параметри <video>

Є ряд інших параметри, які ви можете включити в HTML5 елемент video. Погляньте на наш третій приклад:

<Video controls width = "400" height = "400" autoplay loop muted poster = "poster.png"> <source src = "rabbit320.mp4" type = "video / mp4"> <source src = "rabbit320.webm" type = "video / webm"> <p> Your browser does not support HTML5 video. Here is a <a href="rabbit320.mp4"> link to the video </a> instead. </ P> </ video>

На виході отримаємо щось, подібне до цього:

Нові параметри:

and height Ви можете контролювати розмір відео або за допомогою цих атрибутів, або за допомогою CSS . В обох випадках відео підтримують власне співвідношення ширини і висоти - відоме як співвідношення сторін. Якщо співвідношення сторін не підтримується встановленими вами розмірами, відео буде збільшуватися, щоб заповнити простір по горизонталі, а заповненому простору за замовчуванням буде поставлено суцільний колір фону. autoplay Цей атрибут дозволяє відразу почати відтворення звуку або відео, поки інша частина сторінки завантажується. Вам не рекомендується використовувати Автовідтворення відео (або аудіо) на ваших сайтах, тому що користувачі можуть знайти це дійсно дратівливим. loop Цей атрибут дозволяє відтворювати відео (або аудіо) знову, коли він закінчується. Це також може дратувати, тому використовуйте тоді, коли це дійсно необхідно. muted Цей атрибут змушує програвач відтворювати звук, відключений за замовчуванням. poster Цей атрибут приймає в якості значення URL-адресу зображення, який буде відображатися до відтворення відео. Він призначений для заставки до відео або реклами. preload

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

• "None» не буферизирует файл
• "Auto" буферизирует мультимедійний
• "Metadata" буферірует тільки метадані файлу

Ви можете знайти Наведений вище приклад для відтворення на Github (також перегляньте вихідний код .) Зверніть увагу, що ми не включили атрибут autoplay в live-версію - якщо відео почне відтворюватися, як тільки сторінка завантажиться, ви не побачите заставку до відео!

Елемент <audio>

елемент <Audio> працює точно так само, як елемент <Video> , З кількома невеликими відмінностями, які описані нижче. Типовий приклад може виглядати так:

<Audio controls> <source src = "viper.mp3" type = "audio / mp3"> <source src = "viper.ogg" type = "audio / ogg"> <p> Your browser does not support HTML5 audio. Here is a <a href="viper.mp3"> link to the audio </a> instead. </ P> </ audio>

У браузері це викликає наступне:

Він займає менше місця, ніж відеоплеєр, оскільки немає візуального компонента - вам просто потрібно відображати елементи керування для відтворення звуку. Інші відмінності від відео HTML5 полягають в наступному:

• елемент <Audio> не підтримує атрибути width / height - знову ж таки, немає візуального компонента, тому привласнювати ширину або висоту ні до чого.
• Він також не підтримує атрибут poster- знову ж, через відсутність візуального компонента.

Крім цього, <audio> підтримує всі ті ж функції, що і <video> - перегляньте наведені вище розділи для отримання додаткової інформації про них.

Відображення текстових доріжок до відео

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

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

Хіба було б непогано мати можливість надати цим людям транскрипцію слів, вимовлених в аудіо / відео? Завдяки HTML5 відео, ви можете, з форматом WebVTT і елементом <Track> .

Note: "Transcribe" and "transcript" mean to write down spoken words as text.

WebVTT - це формат для запису текстових файлів, що містять кілька рядків тексту, а також метадані, такі як час, в яке ви хочете відображати кожну текстову рядок, і навіть обмежену інформацію про стилі / позиціонуванні. Ці текстові рядки називаються репліками, і ви можете відображати різні типи для різних цілей, найбільш поширеними є:

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

Типовий файл WebVTT буде виглядати приблизно так:

WEBVTT 1 00: 00: 22.230 -> 00: 00: 24.606 Це перший субтитр. 2 00: 00: 30.739 -> 00: 00: 34.074 Це другий. ...

Щоб відобразити це разом з відтворенням мультимедіа HTML, вам необхідно:

1. Збережіть його як .vtt- файл, в розумному місці.
2. Посилання на файл .vtt з елементом <Track> . <Track> повинен бути поміщений в <audio> або <video>, але після елементів <source>. використовуйте атрибут kind , Щоб вказати, чи є репліки субтитрами, титрами або описами. Крім того, використовуйте srclang , Щоб повідомити браузеру, якою мовою ви записували субтитри.

Ось приклад:

<Video controls> <source src = "example.mp4" type = "video / mp4"> <source src = "example.webm" type = "video / webm"> <track kind = "subtitles" src = "subtitles_en. vtt "srclang =" en "> </ video>

Це призведе до перегляду відео з субтитрами, таким як:

Детальніше читайте в розділі додавання титрів і субтитрів до відео HTML5 . Ви можете знайти приклад , Який відповідає цій статті в Github, написаної Ян Девлін (див. Також вихідний код ). У цьому прикладі використовується JavaScript, що дозволяє користувачам вибирати між різними субтитрами. Зверніть увагу, що для включення субтитрів вам потрібно натиснути кнопку «CC» і вибрати варіант - англійська, німецька або іспанська.

Примітка: Текстові треки також допоможуть вам з SEO , Так як пошукові системи особливо процвітають в роботі з текстом. Текстові треки навіть дозволяють пошуковим системам безпосередньо зв'язуватися з місцем, що відбувається в відео.

Активне навчання: Впровадження власного аудіо та відео

Для цього активного навчання ми (в ідеалі) хотіли б, щоб ви вийшли на вулицю і записали деякі з ваших власних відео та аудіо. Більшість телефонів в ці дні дозволяють легко записувати аудіо і відео, і якщо ви можете перенести їх на на свій комп'ютер, ви можете його використовувати. Можливо, вам доведеться зробити деякий перетворення, щоб в кінцевому підсумку отримати WebM і MP4 в разі відео, а також MP3 і Ogg в разі аудіо, але є досить програм, щоб ви могли зробити це без особливих проблем, таких як Miro Video Converter і Audacity . Ми хотіли б, щоб ви спробували зробити це!

Якщо у вас немає будь-якого відео або аудіо, ви можете вільно користуватися нашими зразками аудіо та відео файлів для виконання цієї вправи. Ви також можете використовувати наш зразок коду для довідки.

Ми хочемо, щоб ви зробили наступні дії:

1. Збережіть аудіо та відео файли в новому каталозі на вашому комп'ютері.
2. Створіть новий HTML файл в тому ж каталозі, і назвати його index.html.
3. Додайте елементи <audio> і <video> на сторінку; щоб вони відображали елементи управління браузером за замовчуванням.
4. Введіть обидва варіанти елемента <source>, щоб браузери знаходили оптимальний формат звуку, який він підтримує і завантажує. Вони повинні включати type атрибути.
5. Дайте елементу <video> заставку, яка буде відображатися до початку відтворення відео. Отримуйте задоволення, створюючи свою власну заставку до відео.

Для додаткового бонусу ви можете спробувати дослідити текстові треки і з'ясувати, як додати деякі титри до вашого відео.

Короткий виклад

Ми сподіваємося, що вам сподобалося грати з відео і аудіо на веб-сторінках! У наступній статті ми розглянемо інші способи вбудовування контенту в Web, використовуючи такі технології, як <Iframe> і <Object> .

See also

In this module