Come posso rendere la riproduzione di video HTML 5 adatta al fotogramma invece di mantenere le proporzioni?

Question

Ho sperimentato la riproduzione di video HTML5. Per esempio io ho questo oggetto video incorporato sulla mia pagina:

<video width="480" height="380" class="ecard" tabindex="0"> 
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="videos/1156 In your honor we'll be dancing.ogv"></source> 
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="videos/1156 In your honor we'll be dancing.mp4"></source> 
</video> 

Il mio problema è l'elemento video conserva è proporzioni mentre io preferirei di forzare la riproduzione per adattarsi al telaio. Qualcuno conosce un modo per farlo?

Answer 1

Attualmente non esiste un modo per farlo, ma con la proprietà immagine CCS3 diventerà possibile. Nessun browser lo supporta ancora, però. Allora si potrebbe usare questo per fare tutti i video tratto di larghezza/altezza:

video { 
    image-fit: fill; 
} 

See spec a http://dev.w3.org/csswg/css3-page/#propdef-image-fit

Answer 2

Sì, penso Theres è almeno un modo per farlo, ma è abbastanza brutto: Ridimensiona l'elemento video usando CSS Transforms (o forse SVG). Il problema è che penso che dovresti avere qualche Javascript per calcolare il rapporto di scala appropriato in base alle dimensioni del contenitore.

La buona notizia sarebbe che WebKit e Gecko hanno supportato CSS Transforms per un po 'di tempo e anche Opera 10.50 lo supporta. E supportano tutti SVG.

http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms https://developer.mozilla.org/En/CSS/Using_CSS_transforms

Answer 3

Un po 'tardi, ma la proprietà CSS3 oggetto-fit in grado di soddisfare questa esigenza. http://dev.w3.org/csswg/css3-images/#object-fit È già implementato in Opera, vedere http://my.opera.com/desktopteam/blog/2010/08/03/presto-update.

Answer 4

Ho provato l'immagine, ma non ci sono riuscito.

poi controllando sopra risposte, utilizzare l'oggetto-fit in CSS:

video { 
    object-fit: fill; 
} 

Da MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):

La proprietà CSS oggetto-fit specifica come il contenuto di un elemento sostituito dovrebbe essere montato sulla scatola stabilita dall'altezza e dalla larghezza utilizzate.

Valore: riempire

Il contenuto sostituito è dimensionato per riempire scatola il contenuto dell'elemento: formato oggetto concreto dell'oggetto è larghezza utilizzata dell'elemento e l'altezza.

Answer 5

Si può anche fare questo: Posizionare l'elemento video al centro con left e top del 50%, poi tradurlo indietro con transform: translate(-50%, -50%);, finalmente dargli una min-height e min-width del 100%

video { 
    left: 50%; 
    min-height: 100%; 
    min-width: 100%; 
    position: fixed; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

Answer 6

Se vuoi che il video riempia l'intero fotogramma E mantenga le sue proporzioni, usa quanto segue:

video 
{ 
    object-fit: cover; 
    height: 100%; 
    width: 100%; 
}