<
  • Главная
Статьи

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

  1. Що нам дає html5 для вставки відео?
  2. Чому тегом video варто користуватися?
  3. Від теорії до справи
  4. Атрибути тега video
  5. Як вставити відео з youtube

Від автора: вітаю вас, дорогий читачу

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

Що нам дає 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 width = "500" height = "400" controls poster = "poster.png">

png>

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

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

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

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

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

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

На цьому я закінчую цю статтю, залишайтеся з webformyself, щоб збільшувати свої знання в області сайтобудування

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

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

дізнатись детальніше

Що нам дає html5 для вставки відео?
Чому тегом video варто користуватися?
Що нам дає html5 для вставки відео?
Чому тегом video варто користуватися?
Звичайно, не в IE6, але кому він зараз потрібен?
Як вставити відео на сайт?
Як?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью