Как заполнить элемент видео с помощью плакатного изображения, даже если изображение плаката отличается от формата видео?

Как сейчас, это проверяется только в WebKit.

Когда изображение плаката устанавливается в элементе <video>, используя атрибут poster, это изображение отображается перед воспроизведением пользователем видео (поведение по умолчанию). Однако, если изображение плаката имеет другое соотношение сторон, чем значение элемента <video>, на котором оно установлено, пробелы (или, возможно, черные) видны по обе стороны изображения (слева и справа или сверху и снизу) и изображение центрировано (также, поведение по умолчанию).

Я хотел бы знать, как масштабировать изображение (желательно в CSS), чтобы он заполнил элемент видео, аналогично использованию значения CSS3 background-size: cover;.

Все еще запутался? Возможно, этот JSFiddle поможет объяснить: http://jsfiddle.net/jonnymilano/2w2CE/

Меня также интересовали бы ответы, которые вынуждали изображение в видеоконтейнер, изменяя его высоту и/или ширину, чтобы соответствовать размерам видеоконтейнера. Однако этот ответ лишь частично разрешит мою проблему.

Ответы

Ответ 1

Этот вопрос заставил меня задуматься, и ваш jsfiddle был полезен в решении этого вопроса (хотя и не для IE, поскольку он не правильно реализует изображение плаката).

В основном объедините то, что вы разместили, установите требуемое изображение плаката в качестве фонового изображения элемента видео и укажите прозрачное изображение 2x2 в качестве фактического изображения плаката.

например.

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

и

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

Я написал немного больше об этом на HTML5 и фоновых изображениях.