È possibile rendere un video "allungato" alla larghezza dell'elemento video &? Apparentemente per impostazione predefinita, il video viene ridimensionato & inserito all'interno dell'elemento video, in proporzione.HTML 5 Video stretch
grazie
contenuti video dovrebbe essere reso all'interno dell'area di riproduzione dell'elemento tale che il contenuto video viene mostrato centrata nell'area di riproduzione della dimensione più grande possibile adatta completamente al suo interno , con le proporzioni del contenuto del video che vengono preservate. 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.
è possibile ottenere un effetto allungato utilizzando CSS 3 transforms, anche se questi non sono pienamente standardizzato o implementati in tutti i browser ancora, e quelle in cui quest'ultimo viene realizzato, è necessario utilizzare un prefisso vendor come -webkit- o -moz-. Ecco un esempio:
<!DOCTYPE html>
<style>
video {
-webkit-transform: scaleX(2);
-moz-transform: scaleX(2);
}
</style>
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video>
C'è anche the object-fit CSS property, che probabilmente vi darà quello che ti serve.
Per inciso, penso che questa richiesta sia realizzata a How can I make HTML 5 video playback fit to frame instead of maintaining aspect ratio?.
questo 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 */
});
Sei l'unica persona che ha reso questo lavoro come dovrebbe essere, tutti gli altri stavano dando degli esempi ma non stava facendo il lavoro. Grazie per aver condiviso. – YumYumYum
Ho testato utilizzando oggetto-fit: compilare CSS
opere buone.
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 devono essere montati nella scatola stabilita per la sua altezza e larghezza utilizzata.
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.
Questo è molto goooooooood? per favore aggiungi più come questo è più valido – YumYumYum
Bello e semplice – Sudarshan
Questa è una soluzione eccellente! – Vinodkumargb
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 object-fit:cover.
Supponiamo di avere un visualizzatore in-page da 500x281 (un corretto ridimensionamento da 1280x720).Ma a volte potresti ottenere un video non correttamente proporzionato a 16: 9, ad esempio 1278x720 o 320x176, 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:
<style>
#vidcontent {
width:500;
height:281;
border:2px solid #F00;
object-fit:cover; /* for those who do support it */
}
</style>
<video id="vidcontent" width="500" height="281" autoplay controls loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
renderà un video con linee bianche o nere in alto e in basso a seconda di come il browser gestisce 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.
<script type="text/javascript">
vidContent = document.getElementById('vidcontent');
vidContent.addEventListener("loadedmetadata", function(e) {
var newHeight = (vidContent.width/this.videoWidth) * this.videoHeight;
vidContent.style.height = parseInt(Math.ceil(newHeight)) + "px";
}, false);
</script>
Abbiamo dividono la larghezza corrente del contenitore per la larghezza determinata del flusso video poi moltiplicare per l'altezza determinata del flusso video. Ciò si traduce in ciò che l'altezza del contenitore deve essere per forzare il più pulito possibile.
È importante che l'altezza e la larghezza del video siano impostate come attributi nell'HTML oltre alla definizione CSS.
Ottima risposta. Solo per aggiungere qui per IE, usa '-ms-transform: scaleX (2);' – Riz
Wow, NICE TROVARE !! – NoName