google-chrome - 视频自动播放显示无 div

Question

我有一个 iframe，其中包含需要在 fancybox 中播放的视频。这是代码：

<a id="playLink" href="#pageVideo">Link for video   </a>

    <div style="display:none">
      <div id="pageVideo">
       <iframe src="someVideo.mp4?autoplay=true" style="overflow:auto" frameborder="0" height="400" width="650"></iframe></div>
    </div>

$('#homePlayLink').fancybox({
    'padding' : 0,
    'width' : 560,
    'height' : 400        
}); 

问题是 Chrome 视频在页面加载时开始播放。因为它在 display none div 中，所以我看不到它，但我听到了音频。如何解决这个问题，所以视频只在花式框中播放 点击链接后？

谢谢。

Answer 1

您的 iframe src 具有 autoplay = true 参数；这就是为什么它会在页面加载时自动播放。

如何将 iframe src 指向一个空白页面，然后在fancybox 打开时覆盖 href？

$("#tip4").click(function() {
  $.fancybox({
        'padding'       : 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'     : 680,
        'height'        : 495,
        'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type'          : 'swf',
        'swf'           : {
             'wmode'        : 'transparent',
            'allowfullscreen'   : 'true'
        }
  });
  return false;
});

查看http://fancybox.net/blog 第 4 部分：显示 youtube 剪辑。