HTML 5 видео настраиваемые элементы управления - PullRequest
Новая
       9

HTML 5 видео настраиваемые элементы управления

24 голосов
/ 21 января 2010

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

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

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

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

Ответы [ 5 ]

27 голосов
/ 22 января 2010

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

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

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

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

3 голосов
/ 22 января 2010

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

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

2 голосов
/ 28 января 2011

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

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

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

1 голос
/ 21 января 2010

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

0 голосов
/ 07 февраля 2019

Вот хорошая статья о том, как сделать свои собственные элементы управления. 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...