2

このhttp://css-tricks.com/perfect-full-page-background-image/と同じ、完全なブラウザー html5 ビデオ効果を作成しようとしてい ます。

しかし、ビデオで私はこのスレッドを読みました Full-bleed background videos? そしてこの Html5フルスクリーンビデオ

これが最良の解決策のようですが、jquery http://syddev.com/jquery.videoBG/を使用していますが、jquery を使用し ない簡単な方法はありますか?

4

1 に答える 1

2

これは古い質問ですが、答えは非常に簡単です。

このhtml5ビデオコード、または次の行に沿った何かを使用してください:

<video id="videobackground" preload autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

次に、この css を適用します。

#video_background { 
  position: absolute;
  bottom: 0px; 
  right: 0px; 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: -1000; 
  overflow: hidden
}

min-height と min-width により、ビデオはビデオの縦横比を維持できます。これは通常、通常のブラウザの通常の解像度での縦横比です。余分なビデオは、ページの端からはみ出します。

私のウェブサイトから詳細を読んでください: HTML ビデオ背景チュートリアル - HTML5 と CSS のみ! http://kesilconsulting.com/web-designer-magazine/html-video-background-tutorial/#ixzz2O3BPNZE6

于 2013-03-20T04:20:58.583 に答える