web-dev-qa-db-fra.com

Commandes vidéo natives du navigateur

Est-il possible de combiner, dans le navigateur, les commandes d’une vidéo native au navigateur, telle que la vidéo à partir de la balise vidéo HTML5?

Je ne comprends pas si c'est possible ou non, je ne trouve rien d'autre que:

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

mais il semble utiliser Javascript

J'aimerais que la barre de contrôle corresponde à la largeur de la vidéo; comme vous pouvez le voir sur l'image jointe, la barre de commandes dépasse la largeur de la vidéo.

default player controls

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>
csscross-browsercustom-controlshtml5-video
13
itsme

Vous ne pouvez pas attribuer de style au jeu de contrôles par défaut du navigateur, mais vous pouvez utiliser l'API médias (JavaScript) pour créer votre propre jeu de contrôles. Vous pouvez bien entendu styler à votre guise.

Jetez un coup d’œil à Utilisation des composants multimédia HTML5 - Partie 3: Commandes personnalisées qui vous montre comment procéder.

15
Ian Devlin

Voici un bon exemple de style des contrôles de lecteur natif (récemment testé dans Chrome): https://codepen.io/BainjaminLafalize/pen/GiJwn

Pour changer la largeur de la barre de commandes du lecteur:

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

Vous pouvez attribuer un style aux contrôles natifs dans certains navigateurs, à l’aide de shadow DOM. Activer le shadow shadow dans les paramètres de l'inspecteur de débogage:

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

Contrôles vidéo HTML5: agrandir?

2
Ryan Weiss