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

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

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

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

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

Ответ 1

В спецификации HTML5 есть атрибут controls для <video>.

Также ознакомьтесь с этой статьей: Видео в Интернете - Погружение в HTML5. Он объясняет:

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

Вот хорошая статья о том, как сделать свои собственные элементы управления. https://sproutvideo.com/blog/quick-and-dirty-custom-player-using-jquery-ui.html

Код выглядит очень простым:

<body>
        <div class="player">
            <div class="video">
                <iframe class='sproutvideo-player' type='text/html' src='https://videos.sproutvideo.com/embed/709adcb31f19e5c6f8/cd8cf2e796aa69d3?noBigPlay=true&showcontrols=false' width='100%' height='100%' frameborder='0'></iframe>
            </div>
            <div class="toolbar">
                <div class="control play-pause"><a href="#"><i class="icon-play"></i></a></div>
                <div class="progress-container">
                    <div class="progress"></div>
                </div>
                <div class="control fullscreen"><a href="#"><i class="icon-fullscreen"></i></a></div>
                <div class="control volume"><a href="#"><i class="icon-volume-up"></i></a></div>
            </div>
        </div>
    </body>