使用图像叠加youtube嵌入式视频,单击时隐藏图像并自动播放

时间:2011-02-09 19:57:04

标签: jquery video youtube overlay hide

我想在我的页面中查看YouTube视频之前显示图片。 有没有办法用jquery或javascript函数来做到这一点。

我希望用我自己的图像覆盖它,点击后,显示视频并自动播放,无需重新加载页面。

感谢您的帮助

此致 朱迪

3 个答案:

答案 0 :(得分:4)

对不起,您的问题的最后一个解决方案是错误的,不,它不是太复杂,不适合您想要的。

如果隐藏,

youtube视频将无法播放。所以添加你的嵌入代码并设置autoplay = 1但隐藏div然后在元素上执行jquery翻转。如果你复制下面的代码并运行它应该工作(除了你必须指向你的jquery库)

<body>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 

<div id="ytapiplayer2" style="display:none;">
<object width="1280" height="745">
<param name="movie" value="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"></embed>
</object>

</div>


<img src="https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1" id="imageID" />
<script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#imageID').hide();
});
</script>
</body>

答案 1 :(得分:4)

如果使用YouTube上的HTML5 iframe,上述操作将无效,因为视频将在后台播放,并且在单击图像之前设置了autoplay = 1。我改为使用.append()在点击图片后附加iframe,这样视频只会在图片的点击事件后自动播放。

<body>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 

<div id="ytapiplayer2" style="display:none;">
</div>

<img src="https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1" id="imageID" />
<script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#ytapiplayer2').append('<iframe width="1130" height="636" src="http://www.youtube.com/embed/YOURVIDEOCODEHERE?autoplay=1" frameborder="0" allowfullscreen></iframe>');
$('#imageID').hide();
});
</script>
</body>

答案 2 :(得分:3)

因为使用javascript api可以很容易地做到这一点我也用New iFrame Embedding模式创建了这个效果(我发现它非常好)。这真的很简单

  1. 显示您的图片
  2. 点击后,将其替换为iframe嵌入代码(使用“autoplay = 1”参数)。