Styling contrôles vidéo natifs du navigateur

Est-il possible de croix-navigateur de style les commandes d'un navigateur natif vidéo tels que la vidéo de HTML5, la balise vidéo?

Je ne comprends pas si c'est possible ou pas, je ne peux pas trouver autre chose que:

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

mais il semble être à l'aide de Javascript

Je voudrais faire de la barre de contrôle de l'adapter à la largeur du film; comme vous pouvez le voir sur l'image ci-jointe, la barre de contrôle excedes la largeur du film.

Styling contrôles vidéo natifs du navigateur

HTML pour l'image ci-dessus

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

source d'informationauteur sbaaaang

  1. 14

    Vous pouvez pas le style, le navigateur par défaut du paramètre de contrôle, mais vous pouvez utiliser le JavaScript API Médias pour construire votre propre kit de contrôle qui, bien sûr, vous pouvez définir le style de quelque façon que vous aimez.

    Prendre un coup d'oeil à Travailler avec HTML5 composants multimédia – Partie 3: contrôles Personnalisés qui vous montre comment cela peut être fait.

  2. 4

    Ici est un bon exemple pour le style de joueur natif de contrôles(juste testé dans google Chrome): https://codepen.io/BainjaminLafalize/pen/GiJwn

    Pour modifier la largeur du joueur de la barre de contrôle:

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

    Vous pouvez définir le style de contrôles natifs dans certains navigateurs, à l'aide de shadow DOM. Permettre à l'ombre dom en debug inspecteur paramètres:

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

    Vidéo HTML5 Contrôles - faire de plus?