HTML 5 видео пользовательских элементов управления

Question

Как и многие веб-разработчики, я с нетерпением жду потокового видео, которое использует новый тег HTML 5 <video>. Поддержка браузера определенно недостаточно широка, поэтому использование Flash/SWF fallback является обязательным.

Это заставило меня подумать: во Flash вы можете настроить элементы управления воспроизведением (пауза, воспроизведение, остановка, поиск, громкость и т. Д.) В HTML 5 ?. Какие существуют опции для настройки глифов, значков и цветов видеоконтроля? Требуется ли Javascript? Например следующая страница предоставляет различные элементы управления в зависимости от браузера - тестирование с использованием FF3.5, Chrome и Safari:

http://henriksjokvist.net/examples/html5-video/

Было бы удивительным, чтобы настроить и стандартизировать элементы управления во всех браузерах и даже соответствовать элементы управления флэш используемый старыми браузерами.

Answer 1

В спецификации HTML5 есть controlsattribute для <video>.

Также ознакомьтесь с этой статьей: Video on the Web - Dive into HTML5. Он объясняет:

По умолчанию элемент не будет раскрывать какие-либо элементы управления проигрывателем. Вы можете создавать свои собственные элементы управления с помощью простого старого HTML, CSS и JavaScript. Элемент имеет такие методы, как play() и pause(), и свойство read/write, называемое currentTime. Есть также объем чтения/записи и отключенные свойства. Таким образом, у вас действительно есть все необходимое для создания собственного интерфейса.

Если вы не хотите создавать свой собственный интерфейс, вы можете сообщить браузеру о наличии встроенного набора элементов управления. Для этого просто добавьте атрибут элемента управления в свой тег.

Answer 2

Я предполагаю, что внешний вид элементов управления зависит от браузера (и, следовательно, не очень настраивается). Вы могли видеть, как выглядит ваша тестовая страница во всех браузерах, отправив ее в Litmus.

Answer 3

В настоящее время на YouTube работает бета-версия HTML5. Вы можете активировать его, посетив http://www.youtube.com/html5. В настоящее время не все видео отображаются в HTML5 после активации бета-версии. Видео, отображаемое в HTML5, получает различную анимацию загрузки, поэтому вы можете идентифицировать их (например, этот http://www.youtube.com/watch?v=KT1wdjlbyFc).

Как вы можете видеть, их видеоплеер просто выглядит так же, как и флеш-версия.

Answer 4

Для тех, кто интересуется отличным кросс-браузерным видеопроигрывателем HTML5, вы можете проверить, что делает Vimeo (http://vimeo.com). Посетите любое видео с браузером, поддерживающим HTML5 (работает, по крайней мере, с Safari, Chrome и IE9) и выберите «Переключиться на HTML5 Player».

Они внедрили пользовательские элементы управления HTML, которые полностью воспроизводят внешний вид вашего Flash-плеера. Элементы управления выглядят одинаково во всех браузерах.

Лучшая межблочная реализация Я видел дату. Они даже используют элемент <canvas> для анимации селектора громкости.