Який тег використовують для вставки відео

2.2. Вставка відео- та аудіо-матеріалів на веб-сторінку

Хоча веб-браузери мають вбудовану підтримку зображень з найперших днів, вбудовування аудіо або відео на веб-сторінку завжди вимагало додаткових модулів (окремих програмних компонентів), які додають більше можливостей браузеру, але не є його частиною (наприклад, Flash, QuickTime, RealPlayer та інші).

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

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

Медіа кодеки і формати

Цифрові аудіо та відео дані обробляються через кодек, формулу, яка перетворює і стискає звук або відео в потік бітів для передачі через Інтернет (термін “кодек” представляє скорочене поєднання двох слів “код” і “декодування”). Коли дані доходять до кінцевого користувача, то він повинен мати той же кодек для декодування закодованого сигналу і перетворення його назад в звук або відео.

Деякі медіа кодеки запатентовані, тобто вони належать тільки одній компанії і не відносяться до відкритих стандартів, і, як правило, власники патентів зазвичай стягують ліцензійні збори за використання їх алгоритмів. Розробники браузерів, такі як Apple, Google і Microsoft, мають великий капітал і готові ліцензувати запатентовані кодеки для своїх браузерів. Інші виробники браузерів, такі як Mozilla і Opera замість цього вибирають відкриті стандарти кодеків і не використовують запатентовані їх види. Навіть не дивлячись на те, що останні версії всіх браузерів підтримують вбудовані медіа-файли HTML5, вони ще не дійшли згоди які кодеки краще використовувати.

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

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

Нижче наведено список підтримуваних браузерами кодеків.
Firefox підтримує AAC частково – тільки в контейнері MP4 і коли операційна система підтримує цей формат.

Елемент впроваджує звуковий файл на веб-сторінку. Це замінний елемент, але він не належить до порожніх елементів, тому він може містити і власний контент, і інші елементи. У своїй простій формі елемент повинен мати тільки атрибут src , який вказує шлях до звукового файлу:

Однак він рідко використовується в такій простій формі. За замовчуванням елемент не має елементів управління і тому повністю невидимий. Він буде розташовуватися в HTML-документі і може бути доступний в браузері або JavaScript, але просте впровадження аудіо файлу не принесе особливої ​​користі. За допомогою логічного атрибута ,code>controls

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

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

     
Вагнер, "Політ валькірій". Фрагмент
    

• autoplay − звук починає грати відразу після завантаження сторінки.
• controls − додає панель управління до аудіофайлу.
• loop − повторює відтворення звуку з початку після його завершення.
• muted − відключає звук при відтворенні музики.
• src − вказує шлях до файлу, який програться.

Елемент вбудовує цифрове відео на веб-сторінку. Як і у випадку з , елемент може мати атрибут src , який вказує URL-адресу відеофайлу:

• autoplay − відео починає відтворюватися автоматично після завантаження сторінки.
• controls − додає панель управління до відеоролика.
• height − задає висоту області для відтворення відеоролика.
• loop − повторює відтворення відео від початку після його завершення.
• poster − вказує адресу картинки, яка буде відображатися, поки відео недоступне або не відворюється.
• preload − використовується для завантаження відео разом із завантаженням веб-сторінки.
• src − вказує шлях до відеоролика, який прорається.
• width − задає ширину області для відтворення відеоролика.

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

     
Вагнер, "Політ валькірій", фрагмент 
    

Вставка відео з YouTube

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

Окрім того, вставити відео у такий спосіб досить просто.
0. Необхідно перейти на сторінку потрібного відео на youtube.com.
1. Натиснути кнопку “Поділитися” під відео
2. Обрати “Вставити”
3. Натиснути “Копіювати”
4. Вставити у html-документ з буфера обміну скопійований код. Щоб відео було адаптивним, необхідно огорнути цей тег у контейнер , якому у стилях надають адаптивні розміри (дивіться наступний приклад).

     .video < position:relative; padding-bottom:56.25%; padding-top:25px;height:0; >.video iframe  
  
   

ЗАУВАЖЕННЯ: Переглядаючи приклад, змінюйте розмір браузера і зверніть увагу, як змінюється розмір відео. Більше про адаптивний дизайн ви дізнаєтесь у спеціальному розділі CSS.

Питання для самоконтролю:

1. Як додати відео до веб-сторінки?
2. Як додати аудіо до веб-сторінки?
3. Що необхідно додати до коду, щоб передбачити випадок, коли браузер користувача не підтримує теги audio , video ?
4. Які функції атрибута loop ?
5. Які функції атрибута autoplay ?
6. Які функції атрибута controls ?

Як вставити в html5 відео: огляд нового тега і його атрибутів

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

Тепер можна з упевненістю сказати – закінчився час старих, неправильних способів вставки подібних файлів.

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

Чому тегом video варто користуватися?

Можливо, ви знаєте, що деякі можливості HTML5 ще дуже мало підтримуються. Так ось, тег video відноситься до тієї частини специфікації, яка підтримується практично повністю. Звичайно, не в IE6, але кому він зараз потрібен? Якщо говорити про нормальні, більш менш сучасних браузерах, то всі вони зможуть зрозуміти цей тег і правильно обробити його.

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Від теорії до справи

Гаразд, переходимо до практики. Як вставити відео на сайт? Як я вже говорив, для цього потрібно використовувати парний тег video. Нагадаю вам, що перед використанням html5 елементів корисно робити наступне:

1. Вказати правильний доктайпів:

2. Вказати тип нових елементів як блоковий: Video (і інші нові теги)

Тепер ми зробили досить, щоб нормальні браузери нормально відобразили ці елементи.

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

Наприклад, Chrome (найкрутіший браузер) підтримує всі формати (ogg, mp4, webm), а IE тільки mp4. Так ось, якщо ви хочете кросбраузерності, то доведеться вказувати кілька форматів, тобто для початку нам потрібно наше відео конвертувати в 3 формату, потім закинути на сервер, і тільки після цього вставляти. Як? За допомогою тегів source:

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Загалом, ось такий досить звичний синтаксис, але все ж в ньому є дещо нове. Наприклад, в атрибуті type спочатку потрібно вказати MIME-тип файлу, а після цього кодеки, які потрібні для його відтворення.

В цілому, кодеки вам не потрібно чіпати – їх просто копіюємо, те ж саме з типом MIME. Вам потрібно лише задати правильний шлях до файлу, щоб все запрацювало, як треба. На веб-сторінці з’явився наш ролик. Щоб у нього були елементи управління, потрібно додати порожній атрибут controls.

Атрибути тега video

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

Autoplay – порожній атрибут без значення. Якщо його вказати, то відтворення почнеться автоматично після повного завантаження сторінки. Такий трюк часто роблять на продають сторінках, щоб моментально привернути увагу людини.

Controls – дуже важливий параметр, теж без значення. Він додає елементи управління. Власне, він використовується практично завжди, тому що потрібно надати людині можливість ставити відео на паузу або перемотувати.

Loop – якщо цей параметр активний, відтворення почнеться спочатку після того, як воно завершилося. Іноді це цілком доречно. Наприклад, якщо ролик дуже цікавий.

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

Це одна сторона медалі. Але у багатьох сьогодні провідний інтернет і ніяких проблем із завантаженням і так не виникне. До того ж, важливо пам’ятати про користувачів, у яких не безлімітний трафік – автоматичне завантаження без їхнього бажання може їх не порадувати.

Poster – як значення цього атрибуту передається шлях до зображення, яке стане мініатюрою до ролика. В цілому, це може мати значення – красива, привертає увагу картинка може спонукати користувача до перегляду. C допомогою параметра poster можна задати шлях до зображення, яке буде видно до початку відтворення нашого ролика. наприклад:

Всі дані атрибути записуються в контейнері video, а не в одинарних тегах source. У них потрібно вказувати тільки шлях до файлу та типи MIME.

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

Як вставити відео з youtube

Але якщо відеоролик є на youtube і його вам потрібно вставити в свій запис, як це зробити? Тут я бачу як мінімум два варіанти. По-перше, у самого ролика на youtube є блок «Поділитися». Там можна взяти html-код, який потім потрібно вставити в редакторі (в режимі html).

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

З появою нових тегів вставка медіафайлів на веб-сторінку було досягнуто значного спрощення. Безсумнівно, будь-якого веб-розробнику потрібно знати, як це робиться. До того ж, за допомогою селектора video або стильових класів ви можете додатково оформити свої ролики, додати їм рамку або якісь інші декоративні елементи. На цьому я закінчую цю статтю, залишайтеся з webformyself, щоб збільшувати свої знання в області сайтобудування.

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3