Question

我有一张图片，当您点击它时，它会被隐藏，YouTube视频会显示出来。

我希望在您点击图片时播放视频，因此我在YT链接上设置了一个参数，以便自动播放，并且除了Google Chrome之外，每个测试的浏览器都能正常运行。

在我点击图片之前，有关Chrome为什么会自动播放视频的任何想法？

 <div id="youtube" style="display:none;">
 <iframe width="940" height="520" src="http://www.youtube.com/embed/kr-oMG6EYSs?rel=0&showinfo=0&autoplay=1" wmode="transparent" frameborder="0" allowfullscreen></iframe>
 </div>


 <img src="images/slider_worklife_top.jpg" width="942" height="521" id="imageID" />
 <script type="text/javascript">
 $('#imageID').click(function() {
 $('#youtube').show();
 $('#imageID').hide();
 });
 </script>

Answer 1

尝试使用$（function（）{/ * CODE * /}

包装JS代码

如果它只是尝试不同的东西并且不浪费你的时间:)：

<div id="youtube" style="display:none;">
   <iframe width="940" height="520" src="" wmode="transparent" frameborder="0" allowfullscreen></iframe>
 </div>

<img src="images/slider_worklife_top.jpg" width="942" height="521" id="imageID" />
<script type="text/javascript">
$(function(){
  $('#imageID').click(function() {
    $('#youtube').show().find("iframe").attr("src","http://www.youtube.com/embed/kr-oMG6EYSs?rel=0&showinfo=0&autoplay=1");
    $('#imageID').hide();
  });
});
</script>

Answer 2

嵌入源被配置为自动播放，隐藏容器div什么都不做（至少在理论上，可能与Chrome不同的浏览器不允许执行iframe）。

解决方案是从页面中完全删除iframe，并在需要时将其附加到容器内的页面。

var yt = $('#youtube');

// If you cant store the html directly
var ythtml = yt.html();
yt.hide().children().remove();

// load iframe once needed
$('#imageID').click(function(){
  $(this).hide();
  yt.html(ythtml).show();
});

当然有一个真正的解决方案：使用YT's APIs。

使用YouTube视频替换IMG的Javascript - 自动播放无法正常工作

2 个答案: