25

現状では、これは WebKit でのみテストされています。

<video>属性を使用して要素にポスター画像を設定するとposter、ユーザーがビデオを再生する前にこの画像が表示されます (デフォルトの動作)。ただし、ポスター画像の縦横比が設定されている要素の縦横比と異なる場合<video>、画像のいずれかの側 (左右または上下) に空白 (または場合によっては空白) が表示され、画像が正しく表示されません。中央揃え (デフォルトの動作)。

background-size: cover;CSS3値を使用するのと同様に、ビデオ要素を埋めるために、この画像を（できればCSSで）拡大する方法を知りたいです。

まだ混乱していますか？おそらく、この JSFiddle が説明に役立つでしょう: http://jsfiddle.net/jonnymilano/2w2CE/

ビデオコンテナの寸法に合わせて高さや幅を歪めて、画像をビデオコンテナに強制するという回答にも興味があります。ただし、この回答は私の問題を部分的にしか解決しません。

4

1 に答える 1

55

この質問は私に考えさせられました、そしてあなたの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ビデオと背景画像でもう少し詳しく書きました。

于 2013-03-19T20:20:07.797 に答える