web-dev-qa-db-fra.com

Vidéo HTML5 entièrement réactive

Est-il possible d'avoir un HTML5 dans un élément <video> Absolument positionné qui se redimensionne à la largeur et à la hauteur de la fenêtre pour que rien ne soit jamais recadré? Beaucoup de solutions que j'ai vues semblent s'appuyer sur la balise <iframe>, Que je n'ai pas, ou seulement redimensionner en fonction de la largeur (ce que je peux déjà faire).

Fondamentalement, je cherche un moyen de garantir que la vidéo est aussi grande que possible, mais aussi de ne jamais recadrer si la fenêtre est redimensionnée - même dans IE9. (Remarque: si la vidéo doit conserver son rapport, il est donc correct s'il y a des barres noires.)

C'est ce que j'ai essayé jusqu'à présent.

/*CSS*/

#player-overlay {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000        
    z-index:999;
}
<!--HTML-->

<div id="player-overlay">
  <video width="100%" video="100%" style="width:100%, height:100%">
    <source src="../static/video/10s.mp4" />
    <source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
  </video>    
</div>

Il me semble que je vais devoir essayer d'écrire une solution JS à la place.

javascriptjqueryhtmlcsshtml5-video
16
Chuck Le Butt

Utilisez width et max-height sur le <video> élément:

/*CSS*/ 
video {
  width: 100%;
  max-height: 100%;
}
<!-- HTML -->

<div id="player-overlay">
  <video>
    <source src="../static/video/10s.mp4" />
    <source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
  </video>    
</div>

http://jsfiddle.net/fHG69/

De plus, vous manquez un point-virgule après background-color. Lors du positionnement absolu d'un élément pour remplir l'écran, je préfère définir top, bottom, left et right au lieu de définir height et width.

23
gilly3

(Je sais que c'est un vieux fil, mais j'espère que ma réponse aidera quelqu'un là-bas.)

En fait, vous aviez déjà la bonne solution. Le style="width:100%, height:100%" Sur votre <video> Fonctionne, sauf que vous avez besoin d'un point-virgule à la place d'une virgule. (Vous pouvez supprimer les attributs redondants width="100%" Et video="100%".)

La raison pour laquelle width: 100%; height: 100% Fonctionne (notez le point-virgule) est que, même si l'élément <video> Est étiré, la vidéo elle-même conserve son rapport hauteur/largeur et est mise en boîte aux lettres/à colonnes dans le <video> élément: https://stackoverflow.com/a/4000946/5249519 .

L'avantage de height: 100% Est que la vidéo est mise en boîte aux lettres exactement au centre, tandis qu'avec max-height: 100% La vidéo est alignée sur le haut du conteneur.

Vous devez également définir votre <video> Sur display: block. Sinon, la valeur par défaut est display: inline Et vous obtiendrez un espace blanc au bas de la vidéo pour les descendants de police: Il y a un espace de 4 pixels sous les éléments canvas/vidéo/audio en HTML5 =.

Enfin, comme l'a dit @ gilly3, vous avez besoin d'un point-virgule après background-color: #000. Et, bien sûr, vous devez supprimer display: none. =)

Voici la solution complète:

/*CSS*/

#player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 999;
}

video {
  display: block;
  width: 100%;
  height: 100%;
}
<!--HTML-->

<div id="player-overlay">
  <video controls>
    <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    <source src="http://techslides.com/demos/sample-videos/small.ogv"  type="video/ogg">
    <source src="http://techslides.com/demos/sample-videos/small.mp4"  type="video/mp4">
    <source src="http://techslides.com/demos/sample-videos/small.3gp"  type="video/3gp">
  </video>
</div>

Exécutez l'extrait de code en mode "pleine page" et redimensionnez la fenêtre de votre navigateur pour voir l'effet de la boîte aux lettres.

Au fait, vos sources vidéo ne fonctionnaient plus, alors j'ai utilisé des exemples de vidéos de: http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5 .

J'espère que cela pourra aider.

6
DynamicDispatch

Je suis tombé sur cette réponse en essayant de trouver autre chose sur des vidéos réactives. J'ai implémenté un élément vidéo réactif en utilisant un code similaire.

Ce lien peut aider à donner un sens à certaines choses La hauteur est égale à la largeur Pure CSS

Votre code pourrait ressembler à ceci:

#player-overlay {
  position: relative;

  &:before {
    content:'';
    display: block;
    padding-top: 50%;  // 50% equals a 2:1 ratio. you can read more about
                       // the ratios in the link
  }
}

video {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

Vous pouvez changer le rapport en changeant simplement le padding-top sur le pseudo-élément avant.

0
Odin13