HTML 5 Video stretch

Puoi fare un video “stretch” alla larghezza e all’altezza dell’elemento video? Apparentemente per impostazione predefinita, il video viene ridimensionato e adattato all’interno dell’elemento video, in proporzione.

Grazie

Ho testato usando object-fit: compilare CSS

Funziona bene.

video { object-fit: fill; } 

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

La proprietà CSS adatta agli oggetti specifica come deve essere adattato il contenuto di un elemento sostituito alla casella stabilita dall’altezza e dalla larghezza utilizzate.

Valore: riempire

Il contenuto sostituito viene ridimensionato per riempire la casella del contenuto dell’elemento: la dimensione dell’object concreto dell’object è la larghezza e l’altezza utilizzate dell’elemento.

Dalle specifiche per :

Il contenuto del video deve essere riprodotto all’interno dell’area di riproduzione dell’elemento in modo tale che il contenuto del video venga visualizzato centrato nell’area di riproduzione alla massima dimensione ansible che si adatti completamente al suo interno, mantenendo le proporzioni del contenuto del video. Pertanto, se le proporzioni dell’area di riproduzione non corrispondono alle proporzioni del video, il video verrà mostrato in formato letterbox o pillarbox. Le aree dell’area di riproduzione dell’elemento che non contengono il video non rappresentano nulla.

Non ci sono disposizioni per allungare il video anziché letterarlo. Ciò è probabilmente dovuto al fatto che lo stretching offre un’esperienza utente molto negativa e che la maggior parte delle volte non è ciò che è previsto. Le immagini sono tese per adattarsi di default e, a causa di ciò, si vedono molte immagini che sono malamente distorte online, molto probabilmente a causa di un semplice errore nel specificare l’altezza e la larghezza.

È ansible ottenere un effetto allungato utilizzando le trasformazioni CSS 3 , sebbene non siano ancora completamente standardizzate o implementate in tutti i browser e quelle in cui è implementato, è necessario utilizzare un prefisso del fornitore come -webkit- o -moz- . Ecco un esempio:

    

Ha funzionato perfettamente per me

http://coding.vdhdesign.co.nz/?p=29

 $VideoElement = $(_VideoElement); //Cache Jquery reference of this var iOriginalVideoHeight = _VideoElement.videoHeight; var iCurrentVideoHeight = $VideoElement.height(); var iVideoContainerHeight = $VideoElement.parent().height(); var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight; var iScaleY = (iVideoContainerHeight / iOriginalVideoHeight)*iCurrentScale; //Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray $VideoElement.css({ "transform-origin": "0% 0%", "transform":"scaleY(" + iScaleY +")", "-ms-transform-origin" : "0% 0% ", /* IE 9 */ "-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */ "-moz-transform-origin" : "0% 0%", /* Firefox */ "-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */ "-webkit-transform-origin": "0% 0%", /* Safari and Chrome */ "-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */ "-o-transform-origin":"0% 0%", /* Opera */ "-o-transform":"scaleY(" + iScaleY +")" /* Opera */ }); 

C’è anche la proprietà CSS adatta agli oggetti , che probabilmente ti darà ciò di cui hai bisogno.

Per inciso, penso che questa richiesta sia stata realizzata a Come posso rendere la riproduzione di video HTML 5 adatta al frame invece di mantenere le proporzioni? .

Questo non cambierà la proporzione del tuo video ma eliminerà brutti spazi “vuoti” nella parte superiore e inferiore o laterale del tuo visualizzatore video SE il tuo browser non supporta lo stile di object-fit:cover degli object-fit:cover .

Supponiamo che tu abbia un visualizzatore in-page da 500×281 (un corretto ridimensionamento da 1280×720). Ma a volte potresti ottenere un video non correttamente proporzionato a 16: 9, ad esempio 1278×720 o 320×176, come nel caso del video di “Buck Bunny” sul sito W3C. Sarebbe bello se il video riempisse completamente il contenitore e non fosse necessario creare un nuovo contenitore per ogni video con proporzioni errate.

Dato un frammento di codice come:

   

renderà un video con linee nere o bianche nella parte superiore e inferiore a seconda di come il tuo browser gestisce l’ object-fit . Aggiungi il seguente codice JavaScript per un ridimensionamento al volo del contenitore del video che fa sparire quelle linee forzando il tuo contenitore video ad abbinare il video, almeno in verticale.

  

Dividiamo la larghezza attuale del contenitore per la larghezza determinata del stream video e quindi moltiplichiamo per l’altezza determinata del stream video. Ciò si traduce in ciò che l’altezza del contenitore deve essere per forzare il più pulito ansible.

È importante che l’altezza e la larghezza del video siano impostate come attributi nell’HTML oltre alla definizione CSS.