43

How can you display HTML5 <video> as a full screen background to your website? Similar to this Flash site demo...

http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617

4

3 に答える 3

28

ビデオで使用position:fixedし、幅/高さを 100% に設定し、ネガz-indexを付けて、すべての背後に表示されるようにします。

VideoJSを見ると、コントロールはビデオの上にある html 要素であり、z-index を使用してそれらが上にあることを確認します。

HTML

<video id="video_background" src="video.mp4" autoplay>

(webm および ogg ソースを追加して、より多くのブラウザーをサポートします)

CSS

#video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}

ほとんどの HTML5 ブラウザーで動作しますが、ビデオをアクティブにする必要があり、要素が好きではない iPhone/iPad では動作しない可能性があります。

于 2010-10-17T18:20:38.203 に答える
7

これに答えるには少し遅れるかもしれませんが、これはこの答えを探している新しい人にとって役に立ちます。

上記の答えは良いですが、画面のサイズを変更したり、異なる画面サイズで使用したりすると、ビデオがカットされたり、キャンバスの周りが変形したりする可能性があるため、完璧なビデオ背景を作成するには、アスペクト比を確認する必要があります。

少し前にこの問題に遭遇し、メディアクエリを使用して解決策を見つけました。

これは、 CSS だけでフルスクリーンのビデオ背景を作成する方法について書いたチュートリアルです。

ここにもコードを追加します。

HTML:

<div class="videoBgWrapper">
    <video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
        <source src="videosfolder/video.webm" type="video/webm">
        <source src="videosfolder/video.mp4" type="video/mp4">
        <source src="videosfolder/video.ogv" type="video/ogg">
    </video>
</div>

CSS:

.videoBgWrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.videoBg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .videoBg{
    width: 100%;
    height: auto;
  }
}
@media (max-aspect-ratio: 16/9) {
  .videoBg {
    width: auto;
    height: 100%;
  }
}

お役に立てば幸いです。

于 2016-07-14T14:34:37.313 に答える
5

これについてのコメント - フルスクリーンの背景に HTML5 ビデオを使用しましたが、うまく機能します - ただし、縦横比を維持するために、Height:100% と width:auto またはその逆を使用してください。 .

Ipad に関しては、非表示にしてからクリック イベントを強制的に発生させ、クリック イベントの関数で Load/Play() を開始することで、(明らかに) これを行うことができます。

追伸 - これはプラグインを必要とせず、最小限の JS で実行できます - モバイル デバイスをターゲットにしている場合 (おそらくそうであると思います..)、そのようなフレームワークから遠ざかることが前進です。

于 2011-10-10T21:19:57.027 に答える