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

Question

我制作了一个显示 Youtube 图像的脚本。单击图像后，Youtube 视频将自动播放。这些脚本的工作原理如下:

点击图片

• 将 Youtube iframe 替换为设置自动播放:1(播放视频)
• 隐藏图像
• 在 Youtube iframe 周围显示父 div 的父 div

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

单击 .exit 按钮

• 将 Youtube iframe 替换为设置自动播放: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" alt="" />
    </div>
    <div class="yt-video">
        <div class="exit"></div>
        <div class="the-video">
            <iframe class="viddy" width="100%" height="500px" 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" width="'+width+'" height="'+height+'" 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" width="'+width+'" height="'+height+'" 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，但我几乎完成了这个脚本。

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

非常感谢!

Answer 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();
        });