Video 在嵌入视频之前添加图像

我试图为下面的玩家放置上面的图片

这就是我目前得到的。我想把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>

---

根据您要做的事情，您可以使用一些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>

JS

<script type="text/javascript">

$(document).ready(function(){

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

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

});

</script>

$（文档）.ready（函数（）{
$（“.slidingDiv”）.hide（）；
$（“.show_hide”）.show（）；
$（'.show_hide'）。单击（函数（）{
$（“.slidingDiv”）.slideToggle（）；
$（“#视频”）.hide（）；
});
});

我最终发现了问题所在。因此，基本上，除非像您所说的那样使用一些JS，否则您无法做到这一点。还要确保vimeo视频无论你决定使用哪个，都有一个自动播放变量1，否则，无论你能得到多么完美的视频；它永远不会播放

$（'#showVideo'）。单击（函数（）{
$（'#video'）.fadeIn（）.html（''）；
$（“#showVideo”）.hide（）
});

谢谢。在不分开的情况下，仍然很难让它真正工作。你有到你正在开发的页面的链接吗？

  <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>