Browser-native Videosteuerungen animieren

Question

Ist es möglich, die Steuerelemente eines browsereigenen Videos, z. B. Video aus dem HTML5-Video-Tag, browserübergreifend zu gestalten?

Ich verstehe nicht, ob es möglich ist oder nicht, kann ich nichts anderes als finden:

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

aber es scheint Javascript

mit zu ich das machen möchte Steuerbalken passen auf die Videoweite; Wie Sie aus dem angehängten Bild sehen können, überschreitet die Steuerleiste die Videobreite.

HTML für das obere Bild

<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

Sie können nicht den Browser des Standardsteuersatz Stil, aber Sie können den (JavaScript) Medien-API verwenden, um Ihren eigenen Steuersatz zu bauen, die von Natürlich kannst du auf jede Art und Weise stylen, die du magst.

Werfen Sie einen Blick auf Working with HTML5 multimedia components – Part 3: Custom controls, die Ihnen zeigt, wie dies getan werden kann.

Answer 2

Sie können native Steuerelemente in einigen Browsern mit Schatten-DOM formatieren. Aktivieren Schatten dom im Debug-Inspektoren Einstellungen:

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

HTML5 Video Controls - make larger?

Answer 3

Hier ist ein gutes Beispiel für das Styling einheimischen Spieler kontrolliert (nur in Chrome getestet): https://codepen.io/BainjaminLafalize/pen/GiJwn

Um die Breite der Änderung Player-Steuerleiste:

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