在嵌入視頻之前添加圖像

我想將以上圖像放置在下面的播放器中。在嵌入視頻之前添加圖像

這是我到目前爲止。我希望gif能夠超越嵌入式視頻，因此播放時可以開始加載。

<div id="video"><img src="images/hand.gif" width="500" height="281" /> 

<iframe src="http://player.vimeo.com/video/66167649" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</div>

來源

2013-08-01 user2641881

根據你正在嘗試做什麼，你可以使用一些JS來隱藏視頻，直到圖像被點擊。

<a href="#" id="video" class="show_hide"> 
    <img src="images/hand.gif" width="500" height="281" /> 
</a> 

<div class="slidingDiv"> 
    <iframe src="http://player.vimeo.com/video/66167649" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</div>

確保引用的jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

     $(".slidingDiv").hide(); 
     $(".show_hide").show(); 

    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    $("#video").hide(); 
    }); 

}); 

</script>

來源

2013-08-01 11:53:30 MikeDre

謝謝。如果試圖在沒有分離的情況下實際運作，仍然會遇到困難。 – user2641881

你有鏈接到你正在開發的頁面嗎？ – MikeDre

我最終搞清楚什麼是錯的。所以基本上，你不能這樣做，除非像你說的那樣使用一些JS。另外，請確保您決定使用的視頻視頻的自動播放變量爲1，否則，無論您獲得多麼完美，它永遠不會玩。

<div id="video"><a href="#" id="showVideo"><img src="images/hand.gif" width="647" height="366" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"   type="text/javascript"></script> 

    <script type="text/javascript"> 


    $('#showVideo').click(function() { 
    $('#video').fadeIn().html('<iframe src="http://player.vimeo.com/video/66167649?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="647" height="366" align="middle" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'); 
$("#showVideo").hide() 

    }); 
    </script>

來源

2013-08-04 12:10:22 user2641881

在嵌入視頻之前添加圖像

回答

相關問題