Jak mogę dopasować odtwarzanie wideo HTML5 do ramki zamiast zachowania proporcji?

Question

Eksperymentowałem z odtwarzaniem wideo HTML5. Na przykład mam ten obiekt wideo osadzone na mojej stronie:

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

Mój problem jest elementem wideo zachowuje to proporcje natomiast wolałbym, aby wymusić odtwarzanie, aby pasowały do ​​ramy. Czy ktoś wie, jak to zrobić?

Answer 1

Obecnie nie ma sposobu, aby to zrobić, ale z właściwością obrazu CCS3 będzie możliwe. Jednak żadna przeglądarka go nie obsługuje. Następnie można użyć tego, aby wszystkie filmy rozciągnąć na szerokość/wysokość:

video { 
    image-fit: fill; 
} 

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

Answer 2

Tak, sądzę Tam jest przynajmniej jeden ze sposobów, aby to zrobić, ale jest to dość brzydki: Skaluj element wideo za pomocą transformacji CSS (lub może SVG). Problem polega na tym, że myślę, że musiałbyś trochę kodu JavaScript, aby obliczyć odpowiedni współczynnik skali w zależności od wielkości kontenera.

Dobrą wiadomością jest to, że WebKit i Gecko od dłuższego czasu obsługuje CSS Transforms, a także Opera 10.50. Wszystkie one wspierają SVG.

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

Answer 3

Trochę późno, ale własnością CSS3 obiekt-fit zaspokoi tę potrzebę. http://dev.w3.org/csswg/css3-images/#object-fit Jest już zaimplementowany w Operze, patrz http://my.opera.com/desktopteam/blog/2010/08/03/presto-update.

Answer 4

Próbowałem dopasować obraz, ale się nie udało.

następnie zaznaczając powyżej odpowiedzi, używam obiektu-fit w CSS:

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ąpiony element powinien być dopasowany do skrzyni ustalonej na podstawie użytej 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

Można też to zrobić: Umieść element obrazu w centrum z left i top w wysokości 50%, a następnie przełożyć je z powrotem transform: translate(-50%, -50%); wreszcie dać mu min-height i min-width 100%

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

Answer 6

Jeśli chcesz, aby wideo wypełniło całą ramkę ORAZ zachował swój współczynnik proporcji, użyj następującego:

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