在嵌入式视频前添加图像
在嵌入式视频前添加图像
提问于 2013-08-01 11:33:50
我正试图把上面的形象，为球员下面。
这就是我到目前为止得到的。我希望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>回答 2
Stack Overflow用户
回答已采纳
发布于 2013-08-01 11:53:30
根据您想要做的事情，您可以使用一些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>Stack Overflow用户
发布于 2013-08-04 12:10:22
最后我弄明白了到底是怎么回事。因此，基本上，除非像您所说的那样使用JS，否则您不能这样做。还请确保vimeo视频，无论您决定使用哪一个，有一个自动播放变量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&byline=0&portrait=0&color=d01e2f&autoplay=1" width="647" height="366" align="middle" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
$("#showVideo").hide()
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17992911
复制相关文章
相似问题
腾讯云开发者
