Jak wypełnić element wideo plakatem, nawet jeśli obraz plakatu ma inny współczynnik proporcji niż jego element wideo?

Question

W tej chwili jest to testowane tylko w pakiecie WebKit.

Po ustawieniu obrazu plakatu na elemencie <video> za pomocą atrybutu poster, ten obraz jest wyświetlany, zanim użytkownik odtworzy wideo (zachowanie domyślne). Jeśli jednak obraz plakatu ma inny współczynnik proporcji niż w przypadku elementu <video>, w którym jest on ustawiony, biała przestrzeń (lub prawdopodobnie czarna przestrzeń) jest widoczna po obu stronach obrazu (z lewej i prawej strony, z góry iz dołu) oraz z obrazu jest wyśrodkowany (również domyślne zachowanie).

Chciałbym wiedzieć, jak skalować ten obraz (najlepiej w CSS) tak, aby wypełniał element wideo, podobnie jak przy użyciu wartości CSS3 background-size: cover;.

Nadal zdezorientowany? Być może ten JSFiddle pomoże wyjaśnić: http://jsfiddle.net/jonnymilano/2w2CE/

Byłbym również zainteresowany odpowiedziami, które zmusiły obraz do pojemnika wideo, wypaczając jego wysokość i/lub szerokość, aby pasowały do ​​wymiarów kontenera wideo. Jednak ta odpowiedź tylko częściowo rozwiązałaby mój problem.

Answer 1

To pytanie spowodowało, że pomyślałem, a twój jsfiddle był przydatny w rozwiązaniu tego problemu (choć nie dla IE, ponieważ nie implementuje poprawnie obrazu plakatu).

Zasadniczo połącz to, co napisałeś, ustaw wymagany obraz plakatu jako obraz tła elementu wideo i określ przezroczysty obraz 2x2 jako rzeczywisty obraz plakatu.

np.

<video controls poster="transparent.png"> 
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.webm" type="video/webm"> 
</video> 

i

video { 
    width:305px; 
    height:160px; 
    background:transparent url('poster.jpg') no-repeat 0 0; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
} 

napisałem nieco więcej na ten temat na HTML5 Video and Background Images.