0

ブログ内のビデオにカスタムのプレビュー画像を表示する簡単な方法を見つけたいと思っていました。ユーザー Dominic Green は、次のコードで開始するのを手伝ってくれました。問題は、ページの読み込み直後に自動再生モードでビデオがすでに再生を開始している（非表示であっても）が、プレビュー画像をクリックした直後に自動再生を開始したい...

ここに私のコードがあります:

<!doctype html>  


<script type="text/javascript">
$(window).load(function(){
$(".video").hide();

$(".loader").click(function(){
$(this).hide();
$(this).parent().find(".video").show();
});
});  


    #container .post .postimg img{
        width:100%;
        height:auto;
        }
    #container .post .postvideo{
        position:relative;
        display:block;
        width:100%;
        height:430px;
        background-color:#0F3;
        }
        #container .post .postvideo .con{
            position:absolute;
            top:0;
            left:0;
            height:100%;
            width:100%;
            z-index:1;
            }
        #container .post .postvideo .video{
            background-color:#C00;
            }
            #container .post .postvideo .video iframe{
                width:100%;
                height:100%;
                }
        #container .post .postvideo .loader{
            background-color:#06C;
            }
        #container .post .postvideo .loader img{
            width:100%;
            height:100%;
            }


<div class="post">
    <div class="postvideo">
        <div class="con video">
            <iframe width="420" height="315" src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="con loader">
          <img src="http://cache2.allpostersimages.com/p/LRG/27/2728/9CKND00Z/poster/gulin-darrell-pansy-flowers-floating-in-bird-bath-with-dew-drops-sammamish-washington-usa.jpg" width="758" height="388">
      </div>
    </div>
</div><!--! end of .post -->

<div class="post">
    <div class="postvideo">
        <div class="con video">
        <iframe src="http://player.vimeo.com/video/29017795?title=0&amp;byline=0&amp;portrait=0&amp;color=a80101&amp;autoplay=1" width="460" height="259" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </div>
        <div class="con loader">
          <img src="http://cache2.allpostersimages.com/p/LRG/27/2728/9CKND00Z/poster/gulin-darrell-pansy-flowers-floating-in-bird-bath-with-dew-drops-sammamish-washington-usa.jpg" width="758" height="388">
      </div>
    </div>
</div><!--! end of .post -->

4

2 に答える 2

0

youtube API や vimeo API を使用したくない場合は、iframe src を空にして、ローダー div をクリックしたときに設定することをお勧めします。それで

私が使用します

<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>

と

<div class="con loader" data-iframe-src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1">

次に、js コードのクリック イベントで、data-iframe-src 値を iframe src に設定します。

$(this).parent().find(".video iframe").attr("src", $(this).attr("data-iframe-src"));
于 2012-07-26T06:37:41.663 に答える
0

使用する必要があります。

YouTube JavaScript プレーヤー API

あるいは、

これを URL として入力 ( autoplay off)

http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=0"

ボタンをクリックすると、srcが次のように変更されます

http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1"

これは js API ほどスムーズではありませんが、うまくいきます。

于 2012-07-26T06:04:23.237 に答える