4

私はビデオを背景として設定しようとしてきました、私はflv-fileとyoutube-linkを持っています。html5ビデオタグやjqueryを使用すると、Webサイトに配置するのはそれほど難しくありませんが、Webサイトに配置する方法がわかりませんが、自動起動はできません。テキストが表示される半透明の長方形があります。だから私のアイデアは、テキストと長方形を消してビデオを再生させるためのボタンまたはリンクを作成することでした。

誰かがこれを行うための優れたプラグインまたはスクリプトを知っていますか、または誰かが正しい方向にぶつかることができますか？

グリーツ

4

2 に答える 2

4

プラグインを使用する必要がなく、はるかに高速なネイティブ ブラウザの html5 ビデオ プレーヤーでもこれを行うことができます。これを試して：

これはjsFiddleの例です。

jQuery:

$(document).ready(function() {
    var windowH =  $(window).height();
    $('#main_container, #overlay').height(windowH);
    $(window).resize(function () {
        var windowH =  $(window).height();
        $('#main_container, #overlay').height(windowH);
    });
});​

CSS:

body { background-color: #000000; font-family: Arial; font-size: 12px;
       color: #000; margin: 0; padding: 0; overflow: hidden; }
#main_container { float: left; position: relative; width: 100%; height: 100%; 
                  background-color: #000000; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
         min-width: 100%; z-index: 9997; }​
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
           z-index: 9998; }

html:

<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
 <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
 <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</div>

注: コントロールを非アクティブ化するためにオーバーレイ div を使用し、jsFiddle の例のように、ビデオのあらゆるコンテンツを使用できます。

于 2012-08-10T14:54:28.403 に答える
0

スクリプトが必要な場合は、https ：//github.com/sydlawrence/jquery.videoBGを試すことができます。

ここのドキュメント：http ：//syddev.com/jquery.videoBG/index.html#documentationには、ブールパラメータを使用した自動再生オプションがあるようです...したがって、falseに設定するだけだと思います

自動再生ブール

于 2012-08-10T15:00:54.140 に答える