web-dev-qa-db-ja.com

ポスター画像がビデオ要素と異なるアスペクト比である場合でも、ビデオ要素をポスター画像で埋める方法は？

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

poster属性を使用して<video>要素にポスター画像を設定すると、ユーザーがビデオを再生する前にこの画像が表示されます（デフォルトの動作）。ただし、ポスター画像が設定されている<video>要素のアスペクト比と異なる場合、画像の左右（または左右または上下）に空白（またはおそらく空白）が表示されます）および画像は中央に配置されます（デフォルトの動作）。

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

まだ混乱していますか？おそらく、このJSFiddleは次の説明に役立ちます。 http://jsfiddle.net/jonnymilano/2w2CE/

また、ビデオコンテナに画像を強制的に挿入し、ビデオコンテナのサイズに合わせて高さや幅をゆがめる答えにも興味があります。しかし、この答えは私の問題を部分的にしか解決しません。

html5css3html5-video
20
jonathanbell

この質問は私に考えさせられ、あなたの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 Video and Background Images でそれについてもう少し書いた。

50
Ian Devlin