在 IE 中使用 jQuery 删除 iframe 后，Youtube 音频仍在播放

Posted 2023-05-09

【中文标题】在 IE 中使用 jQuery 删除 iframe 后，Youtube 音频仍在播放

【英文标题】：Youtube audio still playing after removing iframe with jQuery in IE

【发布时间】：2013-04-20 13:09:17

【问题描述】：

我制作了一个显示 Youtube 图片的脚本。点击图片后，Youtube 视频会自动播放。脚本的工作方式如下：

点击图片时

将 Youtube iframe 替换为设置 autoplay: 1（播放视频） 隐藏图片 在 Youtube iframe 周围显示父 div 的父 div

*在 Youtube iframe 周围的父 div 中，我有一个名为“.exit”的 div，带有一个 .exit 按钮。

点击 .exit 按钮时

将 Youtube iframe 替换为设置 autoplay: 0（停止视频） 显示图片 在 Youtube iframe 周围隐藏父 div 的父 div

它在 Google Chrome 和 FireFox 中就像一个魅力，但在 IE 9 和 10 中，视频的音频会继续播放。即使在单击 .exit 按钮后，我 .remove() Youtube iframe 的整个父 div 也是如此。在 IE Developer 工具中，您可以看到整个 div 消失了，但您仍然可以听到音频。

显示代码

这是我的函数的代码。我制作了这样的脚本，所以我只需在每个 Youtube ID 的 html 中粘贴一个新的 .video-slide。

HTML：

<div class="video-slide">
    <div class="preview-image">
        <img src="http://img.youtube.com/vi/%YOUTUBE_ID%/maxresdefault.jpg"  />
    </div>
    <div class="yt-video">
        <div class="exit"></div>
        <div class="the-video">
            <iframe class="viddy"   src="http://www.youtube.com/embed/%YOUTUBE_ID%?rel=0&showinfo=0" frameborder="no"></iframe>
        </div>
    </div>
</div>

JQuery:

/*YOUTUBE*/
jQuery(document).ready(function() 

    //Add uniq slide id to each .video-slide in the div .video-slider
    jQuery(".video-slider").children().each(function(i) 
        jQuery(this).addClass("id_" + (i+1));
    );

    //Add uniq slide id to each .video-slide in the div .video-slider
    jQuery(".video-slider").children().each(function(i) 
        jQuery(this).addClass("id_" + (i+1));
    );

    //Function for each video
    youtubeSlider = function()
        jQuery('.preview-image', this).click(function() 
            var slideId = jQuery(this).closest('.video-slide').attr('class').split(' ')[1];
                slideIdClass = '.' + slideId;
                youtubeID = jQuery(slideIdClass + ' .preview-image img').attr('src').split("/")[4];
                youtubeWidth = jQuery(slideIdClass + ' .viddy').attr('width');
                youtubeHeight = jQuery(slideIdClass + ' .viddy').attr('height');

                autoPlayVideo(youtubeID,youtubeWidth,youtubeHeight);
                jQuery(slideIdClass + ' .preview-image').hide();
                jQuery(slideIdClass + ' .yt-video').show();
        );

        var exitId = jQuery('.exit', this);
        jQuery(exitId).click(function() 

            var slideId = exitId.closest('.video-slide').attr('class').split(' ')[1];
                slideIdClass = '.' + slideId;
                youtubeID = jQuery(slideIdClass + ' .preview-image img').attr('src').split("/")[4];
                youtubeWidth = jQuery(slideIdClass + ' .viddy').attr('width');
                youtubeHeight = jQuery(slideIdClass + ' .viddy').attr('height');

                stopPlayVideo(youtubeID,youtubeWidth,youtubeHeight);
                jQuery(slideIdClass + ' .preview-image').show();
                jQuery(slideIdClass + ' .yt-video').hide();
        );


        function autoPlayVideo(vcode, width, height)
          "use strict";
          jQuery(slideIdClass + " .the-video").html('<iframe class="viddy"   src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=0&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
        

        function stopPlayVideo(vcode, width, height)
          "use strict";
          jQuery(slideIdClass + " .the-video").html('<iframe class="viddy"   src="https://www.youtube.com/embed/'+vcode+'&loop=0&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
        

    
    jQuery(".video-slide").each(youtubeSlider);     

);

我知道 Youtube API，但我几乎完成了这个脚本。

所以我想知道的是：有没有办法解决这个问题？

非常感谢！

【参考方案1】：

我已经修好了！

奇怪的是，IE 第二次没有读取 uniq 变量。所以我不得不删除uniq ID。这不是问题，因为每张视频幻灯片都会在第一次获得正确的 iframe 代码（阅读问题：点击图片 - 替换..）。

所以我改变了这个：

       var exitId = jQuery('.exit', this);
        jQuery(exitId).click(function() 

            var slideId = exitId.closest('.video-slide').attr('class').split(' ')[1];
                slideIdClass = '.' + slideId;
                youtubeID = jQuery(slideIdClass + ' .preview-image img').attr('src').split("/")[4];
                youtubeWidth = jQuery(slideIdClass + ' .viddy').attr('width');
                youtubeHeight = jQuery(slideIdClass + ' .viddy').attr('height');

                stopPlayVideo(youtubeID,youtubeWidth,youtubeHeight);
                jQuery(slideIdClass + ' .preview-image').show();
                jQuery(slideIdClass + ' .yt-video').hide();
        );

到这里：

     var exitId = jQuery('.exit', this);
        jQuery(exitId).click(function() 

            var youtubeID = jQuery('.preview-image img').attr('src').split("/")[4];
                youtubeWidth = jQuery('.viddy').attr('width');
                youtubeHeight = jQuery('.viddy').attr('height');

                stopPlayVideo(youtubeID,youtubeWidth,youtubeHeight);
                jQuery('.preview-image').show();
                jQuery('.yt-video').hide();
        );