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

HTML5 Video - HTML5 Rocks

  1. Вступ
  2. 1. Розмітка
  3. 3. Що робити з діючими версіями IE, які не підтримують відеотег?
  4. 4. Кодування відеофайлів
  5. 5. Найцікавіше
  6. 5.1 Відео та інші елементи HTML
  7. 5.2 Відео та JS
  8. 5.3. Відео та CSS
  9. 5.4. Відео та canvas
  10. 5.5. Відео та SVG

Вступ

Відеотег - це одна з найпопулярніших функцій HTML5. Часто відеотег представляють як альтернативу технології Flash на веб-сайтах, але це далеко не все, що він може. Він увійшов в число тегів HTML зовсім недавно, але його можливості і підтримка різними браузерами розширюються з вражаючою швидкістю. Як ви побачите в цьому керівництві, основна перевага відеотега - його природна інтеграція з іншими рівнями веб-програмування, такими як CSS і JavaScript, а також з іншими тегами HTML.

У цьому керівництві розкривається суть відеотега і демонструються різні приклади його інтеграції з іншими функціями HTML5, такими як <canvas>.

1. Розмітка

Для демонстрації HTML-відео на сайті достатньо наступних ліній:

<Video> <source src = "movie.mp4" type = 'video / mp4; codecs = "avc1.42E01E, mp4a.40.2" '/> <source src = "movie.webm" type =' video / webm; codecs = "vp8, vorbis" '/> </ video>

У цьому фрагменті використовується тег <source>, що дозволяє вказати кілька варіантів формату на випадок, якщо якийсь з них не підтримується браузером користувача. Детальніше ми обговоримо це питання в наступному розділі.

Також можна використовувати простий формат відео, і тоді синтаксис буде таким же, як для тега зображень. У найближчому майбутньому, коли все браузери будуть підтримувати єдиний формат відео, цей синтаксис стане використовуватися найчастіше.

<Video src = "movie.webm"> </ video>

А поки зосередимося на попередньому, більш поширеному зараз варіанті. Найважливіший момент - правильно вказати MIME-тип для обробки відеофайлів сервером в заголовку Content-Type. В іншому випадку відео може працювати некоректно, навіть якщо використовується локальна копія з вашого сайту. В Apache httpd.conf досить додати наступні рядки:

AddType video / ogg .ogv AddType video / mp4 .mp4 AddType video / webm .webm

Якщо ваш додаток працює на платформі Google App Engine, потрібно додати в файл app.yaml приблизно наступний код (окремо для кожної частоти):

- url: /(.*\.ogv) static_files: videos_folder / \ 1 mime_type: video / ogg upload: videos_folder / (. * \. Ogv)

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

можна уявити як ZIP-файл, який містить закодований відео- та аудіосигнал. В Інтернеті актуальні формати WEBM, MP4 і OGV:

  • = H.264 + AAC
  • = Theora + Vorbis
  • = VP8 + Vorbis

Відеотег розвивається на диво швидко. Всього рік тому він підтримувався тільки браузером Safari і тільки в стабільній версії. Тепер відео HTML5 підтримують всі сучасні браузери, включаючи IE9. Що стосується кодеків, розробники Firefox, Chrome і Opera домовилися включити підтримку WEBM в якості загального відеоформату, використовуючи проект WebM . Internet Explorer також буде його підтримувати, якщо кодек встановлений на комп'ютері (ми сподіваємося, що в майбутньому ця вимога буде скасовано).

Примітка. На момент складання керівництва браузер Safari не підтримував формат WEBM.

У цьому прикладі видно, що браузер може відтворити один або два з трьох зазначених нами форматів (коли Ви бачите все три, вважайте, що вам пощастило):

На момент складання керівництва (серпень 2010 року) найбільш безпечна комбінація форматів, що гарантує відтворення відео в будь-якому браузері, виглядала приблизно так, як в цьому фрагменті:

<Video> <source src = "movie.webm" type = 'video / webm; codecs = "vp8, vorbis" '/> <source src = "movie.mp4" type =' video / mp4; codecs = "avc1.42E01E, mp4a.40.2" '/> <source src = "movie.ogv" type =' video / ogg; codecs = "theora, vorbis" '/> Video tag not supported. Download the video <a href="movie.webm"> here </a>. <Video>

Примітка. Якщо вам потрібно, щоб відео завантажувалося в iPad, як перший варіант необхідно вказати формат MP4. Це пов'язано з помилкою в пристрої, і цей момент потрібно враховувати, поки проблема не буде усунена.

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

<Video> <source src = "movie.webm" type = 'video / webm; codecs = "vp8, vorbis" '/> <source src = "movie.mp4" type =' video / mp4; codecs = "avc1.42E01E, mp4a.40.2" '/> Video tag not supported. Download the video <a href="movie.webm"> here </a>. <Video>

Одна з основних проблем, пов'язаних з форматом MP4, полягає в тому, що його відеокодек (h.264) закритий, а ліцензійні збори за його використання розраховуються дуже складно. Більш детальну інформацію про це форматі можна знайти в Цей розділ .

Ще одна проблема з форматом MP4 - необхідність вказувати атрибут type більш точно, ніж для інших форматів, і з урахуванням профілю, який використовувався для кодування відео. Найпоширеніший профіль - avc1.42E01E, mp4a.40.2, але для впевненості обов'язково звіряйтеся з цим списком профілів .

Незважаючи на те що корпорація Майкрософт оголосила про підтримку відеотега і інших елементів HTML5 в браузері IE9, швидкість переходу її користувачів на нові версії нижче, ніж у інших основних браузерів. Про це ми поговоримо в наступному розділі.

3. Що робити з діючими версіями IE, які не підтримують відеотег?

Перехід на Flash

Також в якості рішення можна використовувати технологію Flash. Певні відеоформатів можуть зажадати повторної кодування в формат, сумісний з Fash-програвачем. Є і хороша новина: компанія Adobe пообіцяла включити в свій програвач підтримку формату WEBM, але точні терміни поки не відомі. Найбільший недолік цього рішення в порівнянні з розширенням Chrome Frame полягає в тому, що Flash-програвач - це сильно погіршена версія користувальницького інтерфейсу і розширених функцій, створених для відеотега. Детально ця технологія розглядається в Короткому посібнику по реалізації аудіо за допомогою HTML5 .

4. Кодування відеофайлів

Для кодування відеофайлів у формати, зазначені в попередньому розділі, можна використовувати програму Miro Converter , Яка підходить як для Windows, так і для Mac. Вона не відрізняється великою кількістю налаштувань, але включає найбільш поширені варіанти для Інтернету, в т. Ч. Три формату, що розглядаються в даному керівництві. Фактично це оболонка для службових програм ffmpeg і ffmpeg2theora , Які працюють в системах Windows, Mac і Linux, запускаються з командного рядка і приймають додаткові параметри. Детальніше про цей інструмент можна прочитати на веб-сайті divintohtml5.org .

5. Найцікавіше

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

5.1 Відео та інші елементи HTML

Тепер в відеопрогравачі можна використовувати всі звичайні атрибути HTML. Наприклад, в наведений нижче фрагмент коду ми включили tabindex, щоб зробити доступною клавіатуру програвача. Є й нові атрибути відеотега, які, скоріше, характерні для аудіо, такі як loop і autoplay. Атрибут poster задає зображення, яке буде відображатися при початковому завантаженні відео, а controls дозволяє вказати, що замість створення окремих елементів управління їх повинен автоматично підготувати браузер. Атрибут preload можна використовувати для завантаження відео у фоновому режимі при завантаженні сторінки, навіть якщо відтворення ще не почалося.

<video poster = "star.png" autoplay loop controls tabindex = "0"> <source src = "movie.webm" type = 'video / webm; codecs = "vp8, vorbis" '/> <source src = "movie.ogv" type =' video / ogg; codecs = "theora, vorbis" '/> </ video>

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

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

Примітка. Для збереження синтаксису XHTML в контексті HTML 5 при створенні багатомовних документів атрибути в коді повинні виглядати наступним чином:

<video poster = "star.png" autoplay = "autoplay" loop = "loop" controls = "controls" tabindex = "0"> <source src = "movie.webm" type = 'video / webm; codecs = "vp8, vorbis" '/> <source src = "movie.ogv" type =' video / ogg; codecs = "theora, vorbis" '/> </ video>

5.2 Відео та JS

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

До відеотегу, як і до будь-якого іншого елементу HTML, можна прикріплювати такі стандартні події, як перетягування, рух миші, виділення і т. Д. При цьому елемент video підтримує безліч нових подій, які можна відстежувати (контролювати) при відтворенні, постановці на паузу або завершення відео. Оскільки при завантаженні відеофайлу можуть виникати різні проблеми, передбачено безліч подій для тонкого управління процесом завантаження як на рівні мережі (loadstart, progress, suspend, abort, error, emptied, stalled), так і на рівні буферизації (loadedmetadata, loadeddata, waiting, playing , canplay, canplaythrough).

На найпростішому рівні можна прикріпити подія canplay, що дозволяє приступити до роботи з відео.

video.addEventListener ( 'canplay', function (e) {this.volume = 0.4; this.currentTime = 10; this.play ();}, false);

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

5.3. Відео та CSS

Відеотег займає важливе місце в моделі DOM, і для його оформлення можна використовувати традиційні елементи CSS (межа, непрозорість і т. Д). Але вся принадність полягає в тому, що можна задіяти і нові риси CSS3: відображення, маски, градієнти, трансформації, переходи і анімації.

Наведіть покажчик миші на наступні фрагменти відео та подивіться, як вони працюють:

# Video-css.enhanced {border: 1px solid white; -moz-box-shadow: 0px 0px 4px #ffffff; / * FF3.5 + * / -webkit-box-shadow: 5px 44px 28px # 333; / * Saf3.0 +, Chrome * / box-shadow: 0px 0px 4px #ffffff; / * Opera 10.5, IE 9.0 * / -moz-transform: translate (0, 10px); / * FF3.5 + * / -o-transform: translate (0, 10px); / * Opera 10.5 * / -webkit-transform: translate (0, 10px); / * Saf3.1 +, Chrome * /}

5.4. Відео та canvas

Canvas - це ще один елемент HTML5, поєднання якого з відеотегом відкриває широкі можливості.

У наступному прикладі ми скористаємося двома функціями елемента <canvas> для імпорту і експорту зображень. Одна з них, метод drawImage, дозволяє імпортувати картинки з трьох різних джерел: елемента зображення, іншого елемента canvas і елемента <video>. Це означає, що кожен раз при виконанні цього методу canvas буде імпортувати і обробляти поточний фрейм відео.

Друга функція тега <canvas>, яку ми використовуємо, є метод toDataURL, що дозволяє експортувати вміст елемента canvas в зображення. Натисніть кнопку відтворення в наступному відео і подивіться, як кожні півтори секунди з нього створюється картинка. Використовуваний для імпорту і експорту елемент canvas фактично прихований.

У наступному коді видно, як ми створюємо інтервал тривалістю 1,5 секунди і вказуємо в якості джерела для методу drawImage елемент video:

video_dom.addEventListener ( 'play', function () {video_dom.width = canvas_draw.width = video_dom.offsetWidth; video_dom.height = canvas_draw.height = video_dom.offsetHeight; var ctx_draw = canvas_draw.getContext ( '2d'); draw_interval = setInterval (function () {// import the image from the video ctx_draw.drawImage (video_dom, 0, 0, video_dom.width, video_dom.height); // export the image from the canvas var img = new Image (); img .src = canvas_draw.toDataURL ( 'image / png'); img.width = 40; frames.appendChild (img);}, 1500)}, false);

У наступному прикладі ми робимо ще один крок. Якщо збільшити періодичність імпорту і видачі зображення з відео, можна зімітувати в canvas вихідну частоту фреймів відеофайлу. Це дозволяє використовувати в canvas такі ж перетворення, як і в відео.

Зліва відтворюється вихідне відео. У центрі знаходиться елемент canvas, в який зображення імпортуються кожні 33 мілісекунди. Другий елемент canvas справа зазнає все перетворення і в той же час імпортує зображення з першого canvas. Ми використовуємо два елементи canvas, тому що в цьому випадку продуктивність набагато вище, ніж при імпорті зображень і перетвореннях, які виконуються одним і тим же елементом.

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

5.5. Відео та SVG

Технологія SVG дозволяє запрограмувати відображення і обробку векторної графіки, але підтримує і інші функції, такі як ефекти фільтра SVG . З їх допомогою можна виділити певний елемент моделі DOM і застосувати до нього готові ефекти: розмивання, композицію, плитку і т. Д. На момент складання керівництва (серпень 2010 року) Firefox 4 і IE9 підтримують вбудований SVG, що дозволяє виділяти елемент відео за допомогою HTML і CSS (в наведеному нижче прикладі ми використовуємо JavaScript і canvas, щоб він працював і в браузерах, поки що не підтримують SVG).

<Svg id = 'image' version = "1.1" xmlns = "http://www.w3.org/2000/svg"> <defs> <filter id = "myblur"> <feGaussianBlur stdDeviation = "1" /> </ filter> </ defs> </ svg> <style> video {filter: url (#myblur); border: 2px solid red; } </ Style>

Натисніть, щоб вимкнути фільтр розмивання

3. Що робити з діючими версіями IE, які не підтримують відеотег?
3. Що робити з діючими версіями IE, які не підтримують відеотег?


Новости
    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

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

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

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

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

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

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

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

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

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

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