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

Можно ли в кросс-браузерном стиле управлять элементами управления видео, встроенными в браузер, такими как видео из тега видео HTML5?

Я не понимаю, если это возможно или нет, я не могу найти ничего, кроме этой статьи, но, похоже, использует Javascript.

Я хотел бы, чтобы панель управления соответствовала ширине видео; как видно из прикрепленного изображения, панель управления превышает ширину видео.

HTML для изображения выше

 <div class="video centered-content">
    <a class="circle-canvas close-video" href="javascript:void(0)" id="video-close" rel="tooltipTOP" data-original-title="close">X</a>
        <video width="63%" height="60%" id="video" class="video" controls>
            <source src="<?php echo base_static_url();?>media/video.mp4">
            <source src="<?php echo base_static_url();?>media/video.ogv">
            <source src="<?php echo base_static_url();?>media/video.webm">
        </video>
    </a>
</div>

Ответ 1

Вы не можете настроить набор элементов управления по умолчанию для браузера, но вы можете использовать (JavaScript) Media API для создания собственного набора управления, который, конечно же, можно стилизовать любым способом, который вам нравится.

Взгляните на Работа с мультимедийными компонентами HTML5 - Часть 3: Пользовательские элементы управления, которые показывают, как это можно сделать.

Ответ 2

Вот хороший пример для стилизации собственных элементов управления проигрывателя (только что протестированных в Chrome): https://codepen.io/BainjaminLafalize/pen/GiJwn

Чтобы изменить ширину панели управления плеером:

video::-webkit-media-controls-panel {
  width: 40px;
}

Ответ 3

В некоторых браузерах можно создавать собственные элементы управления, используя теневую DOM. Включить теневое хранилище в настройках инспектора отладки:

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

Управление видео HTML5 - сделать больше?

Ответ 4

Вы можете стилизовать теневой DOM, но вам нужно смотреть на каждый браузер индивидуально, и обновление браузера может разрушить ваш стиль.

Я рекомендую взглянуть на MediaElement.js, который предоставляет кросс-браузерные элементы управления, которые можно стилизовать с помощью CSS и которые уже оптимизированы для доступности.

Или, если вам нужно всего лишь несколько элементов управления, создайте свой собственный: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics

Ответ 5

Поскольку вы не можете стилизовать элементы управления в каждом браузере (а именно в Firefox), использование пользовательских элементов управления - это путь.

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

Я рекомендую Flowplayer, который очень прост в использовании и стиле. Он также имеет другие полезные функции, такие как возможность контролировать загрузку видео (что очень полезно для нас, поскольку AWS S3 взимает плату за просмотр файла).