» » HTML5 відео

HTML5 відео
HTML5 відео
Одна хвилина відео іноді може розповісти користувачам більше, ніж десятки сторінок тексту.

HTML5 вводить спеціальний тег
video
дозволяє вбудовувати у веб-сторінки відео файли.

Зверніть увагу: підтримку відео мають браузери: Internet Explorer 9 +, Opera 10.50 +, Firefox 3.5 +, Chrome 3.0 +, Safari 3.1 +.

Атрибут src тега
<video />
дозволяє вказати шлях до відео файлу, який буде відтворено.

Атрибут controls відображає в плеєрі кнопки управління відео, a атрибути height (висота) і width (ширина) задають розміри плеєра.
<vіdео src="mountvideo.ogv" width='300' height='200' controls='controls'></vіdео>


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

Opera і Firefox підтримують формат Ogg ( з відео кодеком Theora та аудіо кодеком Vorbis ) і WebM ( з відео кодеком VP8 та аудіо кодеком Vorbis ) , а Internet Explorer і Safari підтримують MPEG4 ( з відео кодеком H.264 і аудіо кодеком AAC ) . Браузер Chrome має підтримку всіх перерахованих форматів.

Таким чином для того , щоб відео нормально відтворювалося у всіх браузерах необхідно додати джерела в форматі Ogg і MPEG4 (або WebM і MPEG4) .

За допомогою тега Ви можете надати декілька джерел відео в різних форматах для відтворення . Браузер буде використовувати перший підтримуваний ним формат.
<vіdео width="300" height="200" controls="controls">
<source src="mountvideo.ogv" type="video/ogg" />
<source src="mountvideo.mp4" type="video/mp4" />
<source src="mountvideo.webm" type="video/webm" />
</vіdео> 


Зверніть увагу: за допомогою атрибуту type Ви повинні вказати mime-тип відео файлу. Відео у форматі ogg повинно мати тип 'video / ogg', mp4 - 'video/mp4', а webm - 'video / webm'.

Підтримка старих браузерів

Текст поміщений у вміст елемента video буде відображений у разі якщо браузер користувача не підтримує тег відео.
<vіdео src='mountvideo.ogv' width="300" height="200" controls="controls">Ваш браузер 
не підтримує елемент video.</vіdео> 


975 09.10.13



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру