web-dev-qa-db-fra.com

Faire en sorte que l'affiche vidéo HTML5 soit de la même taille que la vidéo elle-même

Est-ce que quelqu'un sait comment redimensionner l'affiche vidéo HTML5 de sorte qu'elle s'adapte aux dimensions exactes de la vidéo elle-même?

voici un jsfiddle qui montre le problème: http://jsfiddle.net/zPacg/7/

voici ce code:

HTML:

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>​

CSS:

video{
border:1px solid red;
}​

Notez que le rectangle orange ne s’adapte pas à la bordure rouge de la vidéo.

De plus, le simple ajout du code CSS ci-dessous ne fonctionne pas non plus, car il redimensionne la vidéo avec l'affiche:

video[poster]{
height:100%;
width:100%;
}
csshtml5attributeshtml5-video
72
tim peterson

Pour ce faire, vous pouvez utiliser une image d’affiche transparente en combinaison avec une image d’arrière-plan CSS ( exemple ); cependant, pour avoir un arrière-plan étendu à la hauteur et à la largeur d'une vidéo, vous devrez tilisez un <img> tag ( exemple ).

Il est également possible de set background-size à 100% 100% dans navigateurs prenant en charge background-size ( exemple ).

31
user2428118

Selon les navigateurs que vous ciblez, vous pouvez utiliser la propriété object-fit pour résoudre ceci:

object-fit: cover;

ou peut-être que fill est ce que vous cherchez. Toujours à l'étude pour IE .

77
Lars Ericsson

Ou vous pouvez simplement utiliser preload="none" attribut permettant de rendre l’arrière-plan VIDÉO visible. Et vous pouvez utiliser background-size: cover; ici.

 video {
   background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
 }

 <video preload="none" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 </video>
27
Veiko Jääger

Je m'amusais avec cela et essayais toutes les solutions. Finalement, la solution que j'ai choisie était une suggestion de l'inspecteur de Google Chrome. Si vous ajoutez ceci à votre CSS, cela a fonctionné pour moi:

video{
   object-fit: inherit;
}
20
patrick

Ma solution combine les réponses de user2428118 et de Veiko Jääger, permettant le préchargement mais sans nécessiter une image transparente séparée. Nous utilisons plutôt une image transparente codée en base64 de 1px.

<style type="text/css" >
    video{
        background: transparent url("poster.jpg") 50% 50% / cover no-repeat ;
    }
</style>
<video controls poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>
9
Jamie G

Je suis venu avec cette idée et cela fonctionne parfaitement. En gros, nous voulons supprimer la première image de la vidéo de l'écran, puis redimensionner l'affiche à sa taille réelle. Si nous définissons ensuite les dimensions, nous avons effectué l'une de ces tâches. Alors il n'en reste qu'un. Alors maintenant, le seul moyen que je connaisse pour me débarrasser du premier cadre est de définir une affiche. Cependant, nous allons donner à la vidéo un faux, un qui n'existe pas. Cela entraînera un affichage vide avec l'arrière-plan transparent. C'est à dire. le fond de notre div de parent sera visible.

Simple à utiliser, cependant, il peut ne pas fonctionner avec tous les navigateurs Web si vous souhaitez redimensionner la dimension de l'arrière-plan de la div en dimension de la vidéo, car mon code utilise "background-size".

HTML/HTML5:

<div class="video_poster">
    <video poster="dasdsadsakaslmklda.jpg" controls>
        <source src="videos/myvideo.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
<div>

CSS:

video{
    width:694px;
    height:390px;
}
.video_poster{
    width:694px;
    height:390px;
    background-size:694px 390px;
    background-image:url(images/myvideo_poster.jpg);
}
5
Jonathan J
<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
    Sorry, your browser doesn't support embedded videos.
</video>

Couverture

video{
   object-fit: cover; /*to cover all the box*/
}

Remplir

video{
   object-fit: fill; /*to add black content at top and bottom*/
   object-position: 0 -14px; /* to center our image*/
}

Notez que les contrôles vidéo sont sur notre image, donc notre image n'est pas complètement montrée. Si vous utilisez une couverture adaptée à un objet, modifiez votre image dans une application visuelle en tant que photoshop et ajoutez un contenu de marge inférieure.

2
Daniel Eduardo Delgado Diaz

J'avais un problème similaire et je l'ai simplement corrigé en créant une image avec le même rapport d'aspect que ma vidéo (16: 9). Ma largeur est définie à 100% sur la balise vidéo et maintenant, l'image (320 x 180) convient parfaitement. J'espère que ça t'as aidé!

1
deebs

Vous pouvez utiliser une affiche pour afficher une image plutôt qu'une vidéo sur un périphérique mobile (ou des périphériques ne prenant pas en charge la fonctionnalité de lecture automatique de vidéo). Parce que les appareils mobiles ne prennent pas en charge la fonctionnalité de lecture automatique vidéo.

<div id="wrap_video">
<video preload="preload" id="Video" autoplay="autoplay" loop="loop" poster="default.jpg">
<source src="Videos.mp4" type="video/mp4">
Your browser does not support the <code>video</code> tag.
</video>
</div>

Maintenant, vous pouvez simplement attribuer un style à l'attribut poster qui se trouve à l'intérieur de la balise vidéo pour périphérique mobile via une requête multimédia.

#wrap_video
{
width:480px;
height:360px;
position: relative;
} 
@media (min-width:360px) and (max-width:780px)
{
video[poster]
{
top:0 !important;
left:0 !important;
width:480px !important;
height:360px !important;
position: absolute !important;
}
}
1
gopal sharma

Vous pouvez redimensionner la taille de l'image après avoir généré le pouce

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);
1
Motilal Soni
height:500px;
min-width:100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size:100% 100%;
object-fit:cover;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
0
Irinachen