Qualcuno sa come ridimensionare il poster video HTML5 in modo che si adatti alle dimensioni esatte del video stesso?

ecco un jsfiddle che mostra il problema: http://jsfiddle.net/zPacg/7/

ecco quel codice:

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;
}​

Notare che il rettangolo arancione non viene ridimensionato rispetto al bordo rosso del video.

Inoltre, la semplice aggiunta del CSS di seguito non funziona poiché ridimensiona il video insieme al poster:

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

È possibile utilizzare un'immagine poster trasparente in combinazione con un'immagine di sfondo CSS per ottenere ciò ( esempio ); tuttavia, per avere uno sfondo esteso all'altezza e alla larghezza di un video, dovrai utilizzare un <img>tag posizionato in modo assoluto ( esempio ).

È anche possibile impostare background-sizesu100% 100% nei browser che supportanobackground-size ( esempio ).

Aggiornare

Un modo migliore per farlo sarebbe usare la object-fitproprietà CSS come suggerisce @Lars Ericsson.

Uso

object-fit: cover;

se non desideri visualizzare quelle parti dell'immagine che non si adattano alle proporzioni del video e

object-fit: fill;

per allungare l'immagine per adattarla alle proporzioni del video

Esempio

A seconda dei browser a cui ti rivolgi, potresti utilizzare la proprietà object-fit per risolvere questo problema:

object-fit: cover;

o forse fillè quello che stai cercando. Ancora in esame per IE .

Oppure puoi usare semplicemente l' preload="none"attributo per rendere visibile lo sfondo del VIDEO. E puoi usare background-size: cover;qui.

 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>

Stavo giocando con questo e ho provato tutte le soluzioni, alla fine la soluzione che ho scelto è stato un suggerimento dell'ispettore di Google Chrome. Se aggiungi questo al tuo CSS ha funzionato per me:

video{
   object-fit: inherit;
}

La mia soluzione combina le risposte di user2428118 e Veiko Jääger, consentendo il precaricamento ma senza richiedere un'immagine trasparente separata. Usiamo invece un'immagine trasparente 1px codificata 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>

Mi è venuta questa idea e funziona perfettamente. Ok, quindi in pratica vogliamo eliminare il primo fotogramma del video dal display e quindi ridimensionare il poster alle dimensioni effettive del video. Se poi impostiamo le dimensioni, abbiamo completato una di queste attività. Allora ne rimane solo uno. Quindi ora, l'unico modo che conosco per sbarazzarmi del primo fotogramma è definire effettivamente un poster. Comunque daremo al video uno falso, che non esiste. Ciò risulterà in una visualizzazione vuota con lo sfondo trasparente. Cioè lo sfondo del nostro div genitore sarà visibile.

Semplice da usare, tuttavia potrebbe non funzionare con tutti i browser web se vuoi ridimensionare la dimensione dello sfondo del div alla dimensione del video poiché il mio codice utilizza "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);
}

<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
    Sorry, your browser doesn't support embedded videos.
</video>

Copertina

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

Riempire

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

Nota che i controlli video si trovano sulla nostra immagine , quindi la nostra immagine non viene mostrata completamente. Se stai usando una copertina adatta agli oggetti, modifica la tua immagine su un'app visiva come Photoshop e aggiungi un contenuto in basso a margine.

Ho avuto un problema simile e l'ho risolto creando un'immagine con le stesse proporzioni del mio video (16: 9). La mia larghezza è impostata al 100% sul tag video e ora l'immagine (320 x 180) si adatta perfettamente. Spero che aiuti!

È possibile ridimensionare le dimensioni dell'immagine dopo aver generato il pollice

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);

Puoi utilizzare il poster per mostrare l'immagine invece del video sul dispositivo mobile (o sui dispositivi che non supportano la funzionalità di riproduzione automatica del video). Perché i dispositivi mobili non supportano la funzionalità di riproduzione automatica dei video.

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

Ora puoi semplicemente definire lo stile dell'attributo poster che si trova all'interno del tag video per il dispositivo mobile tramite media-query.

#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;
}
}

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;

Questo ha funzionato

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

E il CSS

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

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