2

我制作了一个显示 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" 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>

查询：

/*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，但我几乎完成了这个脚本。

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

非常感谢！

4

1 回答 1

0

我已经修好了！

奇怪的是，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();
        });
于 2013-04-26T14:38:05.320 回答