Stylizacja natywnego sterowania wideo w przeglądarce

Question

Czy możliwe jest stosowanie w przeglądarce różnych formantów rodzimego wideo w przeglądarce, np. Wideo ze znacznika wideo HTML5?

Nie rozumiem, jeśli jest to możliwe, czy nie, nie mogę znaleźć nic innego niż:

http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/

ale wydaje się, że za pomocą JavaScript

Chciałbym, aby pasek kontrolny pasuje do szerokości wideo; jak widać z dołączonego obrazu, pasek sterowania zastępuje szerokość wideo.

HTML dla powyższego obrazka

<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> 
     </div> 

Answer 1

Nie możesz styl domyślny zestaw sterowania przeglądarki, ale można użyć (JavaScript) Nośnik API budować swój własny zestaw sterujący, który od Oczywiście możesz stylizować w dowolny sposób.

Spójrz na Working with HTML5 multimedia components – Part 3: Custom controls, który pokazuje, jak można to zrobić.

Answer 2

Można natywną kontrolę w niektórych przeglądarkach, korzystając z DOM cień. Włącz cień DOM w ustawieniach inspektora Debug:

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

HTML5 Video Controls - make larger?

Answer 3

Tutaj jest dobrym przykładem dla stylizacji natywne kontrolki odtwarzacza (tylko przetestowane w Chrome): https://codepen.io/BainjaminLafalize/pen/GiJwn

Aby zmienić szerokość pasek kontrolny odtwarzacza:

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