视频自动播放显示无 div答案

【问题标题】：Video auto played in display none div视频自动播放显示无 div
【发布时间】：2012-08-31 08:13:20
【问题描述】：

我有一个 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 中，所以我看不到它，但我听到了音频。如何解决这个问题，所以视频只在花式框中播放点击链接后？

谢谢。

【问题讨论】：

标签： google-chrome iframe fancybox

【解决方案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 剪辑。

【讨论】：