HTML 5 Rozciągnięcie wideo

Question

Czy można "rozciągnąć" wideo do szerokości elementu o szerokości &? Wygląda na to, że domyślnie film zostanie przeskalowany w proporcji & dopasowany do elementu wideo.

dzięki

Answer 1

Od the spec for <video>:

treści wideo powinny być świadczone wewnątrz obszar odtwarzania elementu w taki sposób, że materiał wideo jest wyświetlany w środku obszaru odtwarzania w największym możliwym rozmiarze, który pasuje całkowicie w nim , przy zachowaniu współczynnika kształtu treści wideo. Jeśli więc proporcje obszaru odtwarzania nie są zgodne z proporcjami wideo, wideo zostanie pokazane jako letterboxed lub pillarboxed. Obszary obszaru odtwarzania elementu, które nie zawierają filmu, nie reprezentują niczego.

Nie ma żadnych przepisów na rozciąganie wideo zamiast na letterbox. Jest tak prawdopodobnie dlatego, że rozciąganie daje bardzo złe wrażenia użytkownika, a większość czasu nie jest tym, co jest zamierzone. Obrazy są rozciągnięte, aby pasować domyślnie, i dlatego widzisz wiele obrazów, które są źle zniekształcone w Internecie, najprawdopodobniej z powodu prostego błędu w określaniu wysokości i szerokości.

Można osiągnąć efekt rozciągniętego korzystając CSS 3 transforms, choć te nie są w pełni znormalizowane lub wdrażane we wszystkich przeglądarkach jeszcze, i te, w których jest wdrażany, trzeba użyć przedrostka dostawcy takiego jak -webkit- lub -moz-. Oto przykład:

Answer 2

Istnieje również the object-fit CSS property, który prawdopodobnie da ci to, czego potrzebujesz.

Nawiasem mówiąc, myślę, że ta prośba dotyczy rzeczywistości How can I make HTML 5 video playback fit to frame instead of maintaining aspect ratio?.

Answer 3

To działało idealnie dla mnie

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 */ 
}); 

Answer 4

Ja testowałem za pomocą obiektu-dopasowanie: wypełnić CSS

działa dobrze.

video { 
    object-fit: fill; 
} 

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

Właściwość CSS obiekt-fit określa sposób zawartość zastąpiona elementem powinny być zamontowane okna ustanowionym przez jego stosowanej wysokości i szerokości.

Wartość: wypełnić

Wymieniony treść jest zaprojektowany, aby wypełnić pole Zawartość elementu: beton wielkość obiektu obiektu jest używana szerokość i wysokość elementu.

Answer 5

Nie spowoduje to zmiany proporcji filmu, ale pozbędzie się nieprzyjemnych "niewypełnionych" przestrzeni u góry iu dołu lub boków przeglądarki wideo, jeśli Twoja przeglądarka nie obsługuje stylu object-fit:cover.

Załóżmy, że masz na stronie przeglądarkę o rozdzielczości 500 x 281 (odpowiednia wielkość z 1280 x 720).Czasami jednak można uzyskać film, który nie jest odpowiednio proporcjonalny do dokładnie 16: 9, powiedzmy 1278x720 lub 320x176, jak w przypadku filmu "Buck Bunny" na stronie W3C. Byłoby miło, gdyby film wypełnił cały pojemnik i nie trzeba tworzyć nowego pojemnika dla każdego niewłaściwie ułożonego filmu.

Biorąc fragment kodu, takich jak:

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

odda wideo z czarnymi lub białymi liniami na górze i na dole, w zależności od sposobu obsługuje przeglądarka object-fit. Dodaj następujący kod JavaScript, aby zmienić wielkość kontenera wideo w locie, co spowoduje zerwanie tych linii przez wymuszenie dopasowania kontenera wideo do wideo, przynajmniej w pionie.

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

Podzielamy bieżącą szerokość kontenera przez określoną szerokość strumienia wideo, a następnie pomnożymy przez określoną wysokość strumienia wideo. To powoduje, że wysokość pojemnika musi być tak czysta, jak to tylko możliwe.

Ważne jest, aby wysokość wideo i szerokość były ustawione jako atrybuty w kodzie HTML oprócz definicji CSS.