Опубликован: 30.06.2011 | Доступ: свободный | Студентов: 8112 / 1258 | Оценка: 4.31 / 4.12 | Длительность: 07:50:00
Лекция 4:

Введение в видео HTML5

< Лекция 3 || Лекция 4: 12 || Лекция 5 >

Кодеки — ложка дегтя в бочке меда

В данный момент потребительские версии браузера Opera поддерживают только не требующий лицензии видео-кодек Ogg Theora, открытый формат сжатия видео некоммерческой организации Xiph.org (http://theora.org/).

Браузеры Firefox и Chrome также поддерживают кодек Theora. Однако браузер Safari не поддерживает, предпочитая вместо этого использовать собственную разработку для кодека H.264 (который браузер Chrome также поддерживает). Компания Microsoft также объявила о поддержке элемента <video>, используя при этом H.264. Как можно понять, все это создает некоторые проблемы, связанные с необходимостью представления видео в нескольких форматах для различных браузеров.

В попытке решить эту проблему компания Google недавно выпустила на безвозмездных условиях видео-кодек VP8 и формат контейнера WebM (http://www.webmproject.org/) с целью создать высококачественный, открытый видео-формат, доступный для различных браузеров и платформ. Это было объявлено публично на конференции 2010 Google I/O (http://code.google.com/events/io/2010/).

В день объявления компания Opera выпустила экспериментальную сборку, поддерживающую WebM. Эта возможность является теперь частью базовой функциональности браузера Opera 10.60 и всех будущих версий настольных браузеров (http://www.opera.com/browser/).

Вернемся к нашему примеру, мы кодируем видео дважды — один раз как Theora и второй как H.264 — добавляем к видео альтернативные элементы <source> с подходящими атрибутами type и позволяем браузеру загрузить тот формат, который он может отобразить. Отметим, что в этом случае мы не используем атрибут src в самом элементе <video>:

<video width=320 height=240 controls poster=image.jpg>
  <source src=myVideo.webm type=video/ogg>
  <source src=myVideo.mp4 type=video/mp4>
  Download the <a href=myVideo.webm>webm</a> or <a href=myVideo.ogg>mp4</a>

Тип файлов MP4 также может воспроизводиться плагином плеера Flash, так что это можно использовать в сочетании как запасной вариант для текущей версии Internet Explorer и более старых версий браузеров. Посмотрите отличную реализацию этой техники Кроком Кейменом в его статье Видео для всех! (http://camendesign.com/code/video_for_everybody), в которой он объединяет object и старый embed в части альтернативного контента элемента <video>.

Конечно, если браузеры, которые не поддерживают элемент <video>, возвращаются к использованию плагинов Quicktime или Flash, мы в действительности оказываемся там, где начинали, и мы не сможем воспользоваться никакими новыми свойствами и улучшениями, которые собираемся описать ниже. Какой же тогда в этом смысл? Необходимо сказать, что это переходное решение, пока собственная поддержка видео не будет реализована во всех основных браузерах, и форматы не будут согласованы. Это случай постепенного ухудшения – пользователи могут получить слегка урезанную версию вашей страницы, но, по крайней мере, они смогут увидеть ваши фильмы.

В Web больше нет граждан второго сорта

Мы видели, что разметка для нового элемента HTML5 <video> является на порядок величины более легко читаемой и понятной по сравнению с тем, что необходимо делать в настоящее время, чтобы добавить фильмы Flash в разметку. Но, несмотря на устрашающий вид старого способа кодирования, в большинстве случаев он работает, не правда ли? Почему же мы должны отказываться от этого подхода, использующего отображение видео с помощью внешнего плагина, такого как Flash?

Основное преимущество элемента HTML5 <video> состоит в том, что, наконец, видео является полноценным содержанием Web, а не отодвигается вглубь элемента object или непроверяемого элемента embed (хотя это теперь проверяется в HTML5). Давайте рассмотрим некоторые реальные преимущества.

Готовая доступность с клавиатуры

Одной из серьезных неразрешенных проблем использования Flash является доступность с клавиатуры. За исключением Internet Explorer в Windows, обычно не существует для пользователя клавиатуры способа как-то переместить свой фокус в фильм Flash. И даже если эти пользователи как-то смогут поместить свой фокус в фильм (используя дополнительные вспомогательные технологии), не существует простого способа переместить фокус оттуда в другое место (если только в фильм не был добавлен специальный код ActionScript для программного возврата фокуса браузера из плагина на страницу). В противоположность этому, так как браузер непосредственно отвечает за элемент <video>, он может использовать элементы управления фильма, как если бы они были обычными кнопками на Web-странице, и включать их в свою обычную последовательность перемещения фокуса.

Поддержка клавиатуры для встроенного видео в настоящее время реализована не во всех браузерах … однако она уже прекрасно работает в браузере Opera 10.50+.

Элемент <video> хорошо сочетается с остальной страницей

Говоря коротко, когда на странице используется плагин, то для изображения резервируется определенная область, которую браузер передает плагину. Что касается браузера, то для него область плагина остается черным ящиком — браузер не обрабатывает и не интерпретирует ничего из того, что там происходит.

Обычно это не является проблемой, но могут возникать проблемы, когда компоновка перекрывает область рисования плагина. Представьте, например, сайт, который содержит видео Flash, но имеет также раскрывающиеся меню на основе JavaScript или CSS, которое необходимо развернуть поверх видео. По умолчанию область рисования плагина расположена поверх Web-страницы, т.е. эти меню будут странным образом появляться позади видео. Аналогичный уродливый результат возникает в случае, когда страница использует lightbox — любое видео Flash будет по-прежнему появляться плавающим поверх затененного представления страницы. Именно поэтому большинство готовых сценариев lightbox стремятся решить эту проблему, удаляя сначала со страницы все объекты плагинов, прежде чем выполнять затенение, и возвращая их, когда затенение прекращается.

В конкретном случае плагина Flash, разработчики могут исправить эту проблему отображения, добавляя атрибут wmode='opaque' в свой элемент <object> и эквивалентную конструкцию <param name='wmode' value='opaque'> в свой элемент <embed>. Однако, это приводит также к тому, что плагин становится полностью недоступным для пользователей со считывателями экрана, и поэтому лучше этого не делать.

Проблемы и странное поведение могут возникать также, если страница испытывает динамическое изменение компоновки. Если размеры области рисования плагина изменяются, то это может иметь иногда непредвиденные последствия — видео, воспроизводимое в плагине, может не изменить размер, но может быть вместо этого просто обрезано, или будет выводиться дополнительное пустое пространство.

В случае собственного элемента <video> сам браузер заботится об отображении. Поэтому элемент <video> ведет себя также как и любой другой элемент компоновки страницы. Его можно позиционировать, сделать плавающим, перекрывающимся или изменяющим динамически размеры, без каких-либо дополнительных средств. Можно даже получить интересные эффекты, такие как полупрозрачное видео, задавая просто плотность элемента с помощью CSS. Совершенно новый мир удивительного видео ожидает нас.

Оформление <video> с помощью CSS

Теперь видео является частью множества технологий Открытой Web, поэтому мы можем использовать CSS для надежного стилевого оформления элемента.

(Прочтите наше руководство по переходам CSS3 и 2D-преобразованиям (http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/)).

Объединение <video> и <canvas>

Когда браузер реализует размещение и воспроизведение видео, мы легко можем размещать и объединять другие элементы поверх него. В данном примере <canvas> накладывается поверх видео.

Отметим, что <canvas> не полностью покрывает видео. Мы сделали холст на 40 пикселей короче, чем высота видео, чтобы область видео, где появляются элементы управления, не закрывалась. Это гарантирует, что, если пользователь переместит мышь в нижнюю часть видео, будет достаточно области элемента <video>, выглядывающего из-под холста, чтобы получить сообщение события зависания курсора, и заставить его отобразить элементы управления. Доступ с клавиатуры к элементам управления должен работать независимо от закрытия элементов, однако поддержка клавиатуры в настоящее время варьируется в различных браузерах.

Создание собственных элементов управления

Элементы <video> и <audio> (который будет рассмотрен в будущей статье) являются экземплярами новых элементов медиа из HTML5 DOM (http://www.w3.org/TR/html5/video.html#media-elements), которые предоставляют мощный API, позволяющий разработчикам управлять воспроизведением видео с помощью целого множества новых методов JavaScript и свойств. Давайте рассмотрим некоторые из наиболее подходящих для создания простого индивидуального средства управления:

play() и pause()

Вполне очевидно, что эти методы начинают воспроизведение видео и делают паузу. Метод play() будет всегда начинать воспроизведение видео с текущей позиции воспроизведения. Когда видео загружается впервые, это будет первый кадр видео. Отметим, что не существует метода stop() — если вы хотите остановить воспроизведение и "перемотать" в начало видео, то нужно будет сделать паузу с помощью pause() и программным путем самостоятельно изменить текущую позицию воспроизведения.

volume

Этот атрибут можно использовать для считывания или задания громкости аудио дорожки видео, может принимать значения типа float в диапазоне от 0.0 (тишина) до 1.0 (самый громкий).

muted

Независимо от volume, звук в видео можно заглушить.

currentTime

При чтении этот атрибут возвращает текущую позицию воспроизведения в секундах, также выраженную как float. Задание этого атрибута будет — если возможно — перемещать позицию воспроизведения в указанную позицию времени. (Отметим, что задание currentTime, или поиск, в настоящее время не реализовано в браузере Opera.)

Кроме того, элементы медиа также порождают ряд событий как часть своей модели обработки, которые можно отслеживать и перехватывать. Для нашего примера мы рассмотрим только несколько из них:

loadeddata

Браузер загрузил достаточно видео данных, чтобы начать воспроизведение в текущей позиции.

play и pause

Воспроизведение было начато или остановлено на паузу. Если мы управляем видео из JavaScript, мы можем следить за этими значениями, чтобы убедиться, что вызов метода play() или pause() завершился успешно.

timeupdate

Текущая позиция воспроизведения изменилась, потому что видео воспроизводится, сценарий изменил его программным путем, или пользователь решил переместиться в другую позицию видео.

ended

Мы достигли конца видео, и элемент <video> не задан для циклического воспроизведения или обратного воспроизведения (не рассматривается в этой статье).

Теперь мы имеем все основные строительные блоки, необходимые для создания простого средства управления. Вначале сделаем предостережение: если мы создаем свой собственный элемент управления на основе JavaScript, мы, очевидно, хотим исключить все собственные элементы управления браузера. Однако мы можем захотеть предоставить эти элементы управления как запасной вариант, в том случае, если пользователи отключают JavaScript в своем браузере. В связи с этим мы сохраним атрибут controls в нашей разметке, и программным путем удалим его во время выполнения сценария. Альтернативно мы могли бы также задать значение атрибута как false — оба подхода будут допустимы. Так как наш индивидуальный элемент управления сам опирается для работы на сценарий, мы будем создавать разметку самого элемента управления с помощью JavaScript.

Посмотрите пример со сценарием собственных элементов управления видео в HTML5 в действии. Сценарий достаточно многословен, и требует небольшой чистки перед использованием в производственной среде, но будем надеяться, что он помог проиллюстрировать некоторые новые возможности, которые открывает видео в HTML5. Разработчики Web с небольшими знаниями JavaScript теперь легко могут создавать специальные элементы управления видео, которые отлично дополняют их сайты, не требуя для этого создания заказных видео-плееров Flash.

Дополнительное чтение

  1. Все, что нужно знать об аудио и видео в HTML5 (http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2) – и это действительно все!
  2. Спецификация элемента <video> (http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#video)
  3. Как элемент <video> реализован в браузере Opera (http://my.opera.com/core/blog/2009/12/31/re-introducing-video)
  4. Доступное видео в HTML5, использующее титры на основе JavaScript (http://dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/)
< Лекция 3 || Лекция 4: 12 || Лекция 5 >
Сергей Крупко
Сергей Крупко

Добрый день.

Я сейчас прохожу курс  повышения квалификации  - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?

 

Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам