Робота з відео в html5.

Всім привіт! Сьогодні ми детально поговоримо про таку мультимедійної можливості HTML5 як відтворення відео.

Для того, щоб вставити відео на сайт, використовується тег video.

Відео: HTML5, CSS3. Урок 2. Робота з формами. Відео та аудіо

src="Path / to / video / file.mp4"gt;

У даного тега є атрибут src, в який ми повинні прописати шлях до нашого відеоролика.

Якщо ви зараз відкриєте сторінку в браузері, то побачите картинку (постер), однак, більше нічого не буде. Ви ніяк не зможете взаємодіяти з відео. (Google Chrome).

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

src="Video.mp4"controlsgt;

Якщо вам потрібно, щоб відео відтворювалося відразу при завантаженні сторінки, використовуйте атрибут autoplay.

src="Video.mp4"controlsautoplaygt;

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

src="Video.mp4"controlsautoplayloopgt;

Є ще такий цікавий атрибут як preload. Як зрозуміло з назви, він відповідає за предзагрузкі відео. У нього 3 значення:

none - означає, що ніякої предзагрузкі не буде. Чи не буде взагалі ніякої інформації, навіть такої, як тривалість, рівень гучності і т.д.
metadata - це значення, навпаки, покаже нам ту інформацію, якої не покаже значення none
auto - підвантажує відео відразу після завантаження сторінки, щоб людина могла його відразу запустити і не чекати, поки воно завантажиться. Щось на зразок смужки на YouTube, але тут вона не відображається

Зрозуміло, що якщо у вас стоять відразу 2 атрибута - preload і autoplay, то весь сенс атрибута preload пропадає.

src="Video.mp4"controlspreload="Auto"gt;

Звичайно ж, у даного тега є такі атрибути як width і height, які відповідають за ширину і висоту відео.

src="Video.mp4"controlsautoplaywidht="500"height="500"gt;

За допомогою атрибута poster ви можете виставити свою картинку, яка буде показуватися до того, як ви відтворите відео.

src="Video.mp4"controlsposter="Poster.jpg"gt;

Для того, щоб вимкнути звук у відео, існує атрибут muted.

src="Video.mp4"controlsautoplaymutedgt;

Також в html5 video є можливість вказати проміжок часу, з якого почнеться перегляд і коли він закінчиться. Для цього достатньо вказати # T = після імені відеофайлу і вказати час початку і кінця через кому.

src="Video.mp4 # t = 3,5"controlsgt;

В наведеному вище прикладі ми вказали, що відео має розпочатися з 3 секунди і закінчитися на 5.

Якщо ви хочете вказати тільки час, з якого має розпочатися перегляд, то можна вказати тільки одне значення

src="Video.mp4 # t = 3"controlsautoplaygt;

В наведеному вище прикладі відео буде починатися з 3 секунди і йти до кінця.

Відео: HTML5 уроки для початківців | # 5 - Теги для роботи з текстом

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

src="Video.mp4 # t =, 5"controlsgt;

В наведеному вище прикладі відео почнеться з самого початку і буде йти до 5-ої секунди.

Можливість вбудовувати відео в html з`явилася недавно і зрозуміло, що старі браузери не підтримують цієї можливості. Щоб це виправити, ми можемо написати їм якийсь текст між тегами

src="Video.mp4"controlsgt; 
 На жаль, ваш браузер не підтримує HTML5 Video.

Або ви можете вбудувати сюди якийсь інший плеєр, наприклад, на flash або jаvascript, і тоді відео зможуть переглянути навіть користувачі старих браузерів.

Кожен сучасний браузер підтримує свій формат відео, а старі браузери мають підтримку ще гірше. Щоб підтримувати кілька форматів відео, існує тег source.

controlsautoplaygt; 
src="Video.mp4"gt; 
src="Video.ogv"gt;

При парсінгу сторінки браузер вибере той формат, який він підтримує, і підключить його. Файл підключається тільки один.

Відео: HTML5 уроки з нуля для початківців!

У тега source є атрибут type, в якому ми вказуємо MIME тип і кодеки.

controlsautoplaygt; 
src="Video.mp4"type=`Video / mp4- codecs = "avc1.42E01E, mp4a.40.2"`gt; 
src="Video.ogv"type=`Video / ogg- codecs = "theora, vorbis"`gt;

Вказувати тип файлу не обов`язково, але бажано. Вся справа в тому, що щоб визначити, що це за файл, браузеру доведеться завантажити його початок. Щоб не напружувати зайвий раз мережу, краще завжди вказувати атрибут type.

Отже, на цьому все. Це все, що можна і потрібно знати про HTML5 Video. Дякую за увагу і удачі!

Поділися в соціальних мережах:

Схожі