1

HTML5 ビデオ (および poster 属性) を中央の背景カバーのように機能させる方法はありますか?

幅で遊ぶことができるダミーペンを作成しました：

http://codepen.io/SEFarstad/pen/vujqE

レイアウトは 2 つの 50% 幅のセクションに基づいており、左側のセクションには固定ビデオが含まれ、右側のセクションには絶対位置のコンテンツが含まれます。

主な問題は、私のデザインを垂直に分割する必要があり、水平方向のビデオが問題になることです。このような垂直ベースのレイアウトでこれらの水平ビデオをフルハイトにする方法はありますか? -background-size: cover; を使用するのと同じ方法で。

バックグラウンドビデオなどを使用できることは知っていますが、このプロジェクトでのインタラクティブな要求を満たすために、コントロール、ポスターなどが必要です。

4

1 に答える 1

0

これは古い質問であり、おそらく他のことに移ったことは承知していますが、他の誰かがGoogle経由でこれに出くわした場合に備えて答えたいと思いました. あなたが探していたのはobject-fit、そのような動作をビデオや画像に追加する方法でした。ここにいくつかの情報がありますが、基本的には次のように書くだけです：

video {
  ... // other stuff here
  object-fit: cover;
}

残念ながら、まだすべてのブラウザでこれを使用できるわけではありません。ただし、調べることができるポリフィルがあります。

于 2014-09-04T15:36:41.143 に答える