Відео HTML5: Як вставити відео у свій HTML

До HTML5, для того, щоб відтворити відео на веб-сторінці, вам потрібно було використовувати плагін, такий як Adobe Flash Player. З введенням HTML5 тепер ви можете розміщувати відео безпосередньо на самій сторінці.

Це дає можливість відтворювати відео на сторінках, призначених для мобільних пристроїв, оскільки такі плагіни, як Adobe Flash Player, не працюють на Android або iOS.

Елемент HTML використовується для вбудовування відео у веб-документи. Він може містити одне або декілька джерел відео, представлених за допомогою srcатрибута або елемента джерела.

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

   Your browser does not support the video element. Kindly update it to latest version. 

Елемент підтримується всіма сучасними браузерами. Однак не всі браузери підтримують однаковий формат відеофайлів. Файли MP4 є найбільш широко прийнятим форматом, а інші формати, такі як WebM та Ogg, підтримуються в Chrome, Firefox та Opera.

Щоб забезпечити відтворення вашого відео у більшості браузерів, найкраще практикувати їх кодування як у форматах Ogg, так і в MP4 та включити обидва елементи в елемент, як у прикладі вище. Браузери використовуватимуть перший розпізнаний формат.

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

Ви також могли помітити controlsв тегу. Цей елемент містить багато корисних атрибутів для налаштування досвіду відтворення.

атрибути

controls

Атрибут controlsвизначає, чи відображатимуться елементи керування, такі як кнопка відтворення / паузи або повзунок гучності.

Це логічний атрибут, тобто його можна встановити як true, так і false. Щоб встановити значення true, просто додайте його до тегу. Якщо його немає в тегу, для нього буде встановлено значення false, а елементи керування не відображатимуться.

autoplay

"автовідтворення" можна встановити як true, так і false. Ви встановлюєте значення true, додаючи його в тег, якщо він відсутній у тегу, він встановлюється як false. Якщо встановити значення true, відео почнеться відтворюватися, як тільки буде завантажено достатньо відео, щоб воно могло відтворюватися. Багато людей вважають, що автовідтворення відео є руйнівним або надокучливим. Тож використовуйте цю функцію економно. Також зауважте, що деякі мобільні браузери, такі як Safari для iOS, ігнорують цей атрибут.

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

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

poster

posterАтрибутом є зображення , яке показує на відео , поки користувач натисне , щоб відтворити його.

Відео може коштувати дорого

Хоча включити відео на свою сторінку простіше, ніж будь-коли, часто краще завантажити їх на такі сервіси, як YouTube, Vimeo або Wistia, і замість цього вбудувати їх код. Це пов’язано з тим, що розміщення відео може коштувати дорого, як для вас з точки зору витрат на сервер, так і для ваших глядачів, якщо у них обмежені плани передачі даних.

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

І разом із цим, продовжуйте і вставляйте відео до душі. Або ні - це ваш дзвінок.