jquery fancybox 在 FF 和 IE 中关闭后仍然内联播放视频

Question

这是我的html

<a href="#aboutbarrybio" id="about_barry" class="aboutusbox">Link to Bio</a>

<div id="aboutbarrybio" class="bio_wrapper" style="display: none;">
<div class="about_video">
    <div class="video_wrapper">
        <div class="placard" style="display: none;"><img width="720" height="405" style="cursor:pointer;" src="http://we4.me/tiv/wp-content/uploads/2013/02/youtube-placard-e1359864185923.png"></div>
        <div style="display: block;" class="thevideo">
            <embed width="720" height="405" wmode="transparent" type="application/x-shockwave-flash" src="http://www.youtube.com/v/9bZkp7q19f0&amp;autoplay=1&amp;rel=0">
        </div>
    </div>
</div>

这是我为 fancybox 编写的 javascript：

$(".aboutusbox").fancybox({
  padding       : 1,
  width         : 960,
  afterShow     : function() {
    $('.fancybox-opened .placard').each(function(){
        $('.fancybox-opened .placard').show();
        $('.fancybox-opened .thevideo').hide();
    });

    $('.fancybox-opened .placard').click(function(){
        $('.fancybox-opened .placard').hide();
        $('.fancybox-opened .thevideo').show();
    });
  },
  afterClose    : function() {
    $('.fancybox-inner').empty();
  }
});

尝试用图像标语牌替换视频，然后使用内联隐藏框在fancybox中显示。问题是，如果用户在 Firefox（和 IE？）上播放视频时关闭，它仍然在后台播放。 Chrome 按预期工作。有什么方法可以减轻减去 iframe/ajax、youtube api 或仅使用视频本身的影响？

Answer 1

不需要内嵌视频（以及相关问题），您可以这样做：

• 直接链接到视频（获取href），
• 打开fancybox并将标语牌图片设置为内容，
• 将click 绑定到标语牌图片，然后将其替换为youtube 内容（在afterShow 回调中）。

此外，您可以使用 (HTML5) data-* 属性从链接中传递图像/视频尺寸，而不是这样：

<a href="#aboutbarrybio" id="about_barry" class="aboutusbox">Link to Bio</a>

...你可以这样做：

<a id="about_barry" class="aboutusbox" href="http://www.youtube.com/v/9bZkp7q19f0&amp;autoplay=1&amp;rel=0" data-width="720" data-height="405">Link to Bio</a>

然后使用此脚本显示标语牌图像并将其替换为 click 上的 youtube 视频：

$(document).ready(function () {
    $(".aboutusbox").fancybox({
        padding: 0,
        fitToView: false, // fancybox won't auto-resize to fit in viewport
        // set placard image as content
        content: '<img class="placard" src="http://we4.me/tiv/wp-content/uploads/2013/02/youtube-placard-e1359864185923.png" width="720" height="405" alt="placard" />',
        scrolling: 'no',
        afterShow: function () {
            // get dimensions from data attributes
            var $width = $(this.element).data('width');
            var $height = $(this.element).data('height');
            // create youtube content
            var newContent = "<iframe src='" + this.href + "' frameborder='0' allowfullscreen width='" + $width + "' height='" + $height + "'></iframe>";
            // replace content on placard click
            $(".fancybox-inner").on("click", ".placard", function () {
                $(".fancybox-inner").html(newContent);
            });
        }
    });
}); // ready

参见JSFIDDLE演示。

注意 .on() 需要 jQuery 1.7+