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


93

Est-ce que quelqu'un sait comment redimensionner l'affiche vidéo HTML5 pour qu'elle corresponde 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, ajouter simplement le CSS ci-dessous ne fonctionne pas non plus car il redimensionne la vidéo avec l'affiche:

video[poster]{
height:100%;
width:100%;
}

1
je ne pense pas que vous puissiez utiliser "%" dans les attributs; cependant, le changer à 100 ne résout pas le problème. Je parie que c'est un style de média -webkit. n'hésitez pas à les parcourir trac.webkit.org/browser/trunk/Source/WebCore/css/…
albert

@albert, merci, je ne vois aucune référence posterdans le lien que vous avez envoyé. Pouvez-vous me montrer à quoi ressemble le CSS pour ce dont vous parlez, c'est-à-dire " -webkit media style"? merci
tim peterson

bien c'est ce que je voulais dire par "cueillette"; ce sont des styles de médias spécifiques au chrome; je ne les connais que vaguement, sans parler des pseudo sélecteurs qu'ils déclarent; sans point de départ: je passerais par la recherche de déclarations avec remplissage, etc.
albert

Réponses:


49

Vous pouvez utiliser une image d'affiche transparente en combinaison avec une image d'arrière-plan CSS pour y parvenir ( exemple ); cependant, pour avoir un arrière-plan étiré à la hauteur et à la largeur d'une vidéo, vous devrez utiliser une <img>balise positionnée de manière absolue ( exemple ).

Il est également possible de mettre background-sizeà100% 100% dans les navigateurs qui supportentbackground-size ( par exemple ).


Mettre à jour

Une meilleure façon de le faire serait d'utiliser la object-fitpropriété CSS comme le suggère @Lars Ericsson.

Utilisation

object-fit: cover;

si vous ne souhaitez pas afficher les parties de l'image qui ne correspondent pas au rapport hauteur / largeur de la vidéo, et

object-fit: fill;

pour étirer l'image pour l'adapter aux proportions de votre vidéo

Exemple


- @ user1419007, votre exemple répète l'image d'arrière-plan. Puisque vous suggérez que ce n'est pas la meilleure façon, cela vous dérangerait-il de fournir un jsfiddle montrant comment mettre en œuvre votre deuxième stratégie?
tim peterson

J'ai no-repeatédité l'image d'arrière-plan. Quant à l'autre solution, donnez-moi un moment pour y arriver.
user2428118

Edit: exemple ajouté pour la deuxième solution proposée.
user2428118

merci pour cela, nous avons besoin de javascript pour changer l' z-indeximage de sorte que la vidéo soit visible lorsque vous commencez à la lire.
tim peterson

2
.. le deuxième exemple n'a pas fonctionné dans Chrome? vous devez donner à la div externe une position comme jsfiddle.net/xh8er ; alors ça marche.
commonpike

87

En fonction des navigateurs que vous ciblez, vous pouvez utiliser la propriété object-fit pour résoudre ce problème:

object-fit: cover;

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


3
C'est certainement la réponse.
cilphex

1
+1 pour le lien vers la propriété object-fit , en utilisant object-fit: initialdid it for me.
FireBrand

"object-fit: fill" a fait l'affaire! comme l'a fait "object-fit: initial" (curieusement, parce que je ne vois pas de valeur "initiale" dans la spécification sur developer.mozilla.org/en-US/docs/Web/CSS/object-fit ). Les deux "cover" et "contain" ont déformé l'affiche lors de la lecture dans le navigateur natif de Samsung sous Android 5.1.1. Et cela n'affecte pas IE!
plugincontainer

1
Quel sélecteur CSS avez-vous ciblé pour la règle d'ajustement d'objet? Puisqu'il n'y a aucun moyen de cibler l'image de l'affiche, je suppose que vous avez utilisé video{object-fit: cover;}?
zıəs uɐɟəʇs

@ zıəs uɐɟəʇs Dans mon css c'est ... vidéo [poster] {object-fit: fill}
plugincontainer

27

Ou vous pouvez utiliser simplement l' preload="none"attribut pour rendre l'arrière-plan VIDEO 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>

2
meilleure réponse. ne casse rien, et ne pas précharger une vidéo ne nuit pas vraiment à votre page à moins qu'il ne s'agisse d'un site centré sur la vidéo. +1.
totalementNotLizards

1
J'avais redimensionné en arrière-plan sur les mobiles. À partir d'autres questions / réponses ici (par exemple stackoverflow.com/questions/18229974/… ), il semble que le problème soit la duplication des images (l'arrière-plan du lecteur css et l'affiche de l'élément vidéo). Ce correctif a fonctionné.
plugincontainer

1
Hmm ... a travaillé dans Chrome mais a créé un nouveau problème dans le navigateur Android natif. Voir: stackoverflow.com/questions/39546792/…
plugincontainer

Corrigé enfin - voir la réponse de Lars Ericsson ci
plugincontainer

27

Je jouais avec cela et j'ai essayé 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;
}

Je vous remercie! C'était la solution exacte que je cherchais pour SUPPRIMER l'espace vidéo en haut et en bas
cpcdev

11

Ma solution combine les réponses de user2428118 et Veiko Jääger, permettant un préchargement mais sans nécessiter une image transparente séparée. Nous utilisons à la place une image transparente 1px encodée en base64.

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

Doit-il uniquement s'agir du nom de l'image ou du chemin complet?

Dans le navigateur natif d'Android (le navigateur s'appelle "Internet") sur mon Samsung, l'affiche a été redimensionnée ... catastrophiquement en cours de lecture. Cette solution - un gif transparent comme affiche et "l'affiche" comme arrière-plan - a résolu cela, MAIS, .. maintenant l'affiche ne s'affiche pas dans IE-9, 10 ou 11.
plugincontainer

1
La solution était d'abandonner le gif transparent et l'affiche comme arrière-plan et d'utiliser (voir la réponse de Lars Ericsson ci-dessus) la vidéo [poster] {object-fit: fill}. Problème résolu sur le navigateur natif Samsung sous Android 5.1.1. et IE affiche l'affiche sans problèmes
plugincontainer

Cette approche est meilleure en particulier pour les mobiles. object-fitn'empêche pas les distorsions de taille sauvage posterqui se produisent sur Android pendant le chargement du contenu.
TheLinguist

5

J'ai eu cette idée et cela fonctionne parfaitement. D'accord, nous voulons donc supprimer la première image de la vidéo de l'écran, puis redimensionner l'affiche à la taille réelle de la vidéo. Si nous définissons ensuite les dimensions, nous avons terminé l'une de ces tâches. Alors il n'en reste qu'un seul. Alors maintenant, le seul moyen que je connaisse pour me débarrasser de la première image est de définir une affiche. Cependant, nous allons donner à la vidéo une fausse vidéo, qui n'existe pas. Cela entraînera un affichage vide avec l'arrière-plan transparent. Ie arrière-plan de notre div parent sera visible.

Simple à utiliser, mais il peut ne pas fonctionner avec tous les navigateurs Web si vous souhaitez redimensionner la dimension de l'arrière-plan du div à la 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);
}

c'est malin, je l'ai essayé. Ce n'est pas parfait mais y arriver ... jsfiddle.net/trpeters1/NJtc9
Tim Peterson

Oui tu as raison. En regardant votre jsfiddle, je réalise maintenant que la dimension de la vidéo doit également être correcte et pas seulement l'élément vidéo. Je suppose que j'ai eu de la chance quand je l'ai essayé sur ma page.
Jonathan J

5
<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 affichée. Si vous utilisez une couverture adaptée aux objets, modifiez votre image sur une application visuelle en tant que Photoshop et ajoutez un contenu de marge inférieure.


1

J'ai eu un problème similaire et je viens de le résoudre en créant une image avec le même rapport hauteur / largeur que ma vidéo (16: 9). Ma largeur est définie à 100% sur la balise vidéo et maintenant l'image (320 x 180) s'adapte parfaitement. J'espère que cela pourra aider!


1

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

Vous pouvez utiliser l'affiche pour afficher l'image au lieu de la vidéo sur un appareil mobile (ou des appareils qui ne prennent pas en charge la fonctionnalité de lecture automatique 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 styliser l'attribut poster qui se trouve à l'intérieur de la balise vidéo pour l'appareil 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;
}
}

En fait, iOS 10+ prend en charge la fonctionnalité de lecture automatique de la vidéo avec l'attribut playinline.
Lukas Petr

Comment spécifiez-vous cet attribut?
Khom Nazid

0
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

Cela a fonctionné

<video class="video-box" poster="/" controls>
    <source src="some source" type="video/mp4">
</video>

Et le CSS

.video-box{
 background-image: 'some image';
 background-size: cover;
}

0
  <div class="container">
        <video poster="~/Content/WebSite/img/SiteSetting/Load.gif" autoplay muted loop class="myVideo">
            <source src="~/Content/WebSite/images/VideoTube.mp4" type="video/mp4" />
        </video>

    </div>



 <style>
    .myVideo {
position: absolute;
right: 0;
left: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: inherit;
 }
@media only screen and (max-width:768px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
    }
   }

     @media only screen and (max-width:320px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
  }
}
</style>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.