在IE中用jQuery删除iframe后，Youtube音频仍在播放
在IE中用jQuery删除iframe后，Youtube音频仍在播放
提问于 2013-04-26 11:14:51
我制作了一个显示Youtube图片的脚本。点击图片后，Youtube视频将自动播放。这些脚本的工作方式如下：
点击图像
- 将Youtube iframe替换为设置自动播放:1(播放视频)
- 隐藏图像
- 在Youtube iframe周围显示父div的父div
*在Youtube iframe周围的父div中，我有一个名为" .exit“的div，带有一个.exit按钮。
点击.exit按钮
- 将Youtube iframe替换为设置autoplay: 0(以停止视频)
- 显示图像
- 在Youtube iframe周围隐藏父div的父div
在Google和FireFox中，它的功能就像一种魅力，但在IE9& 10中，视频的音频一直在播放。即使我是Youtube的整个父div的.remove()，单击.exit按钮后也是如此。在IE工具中，您可以看到整个div消失，但是您仍然可以听到音频。
显示代码
这是我的函数代码。我这样做的脚本，所以我只需要粘贴一个新的.视频幻灯片在html中的每个Youtube ID。
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，但我几乎完成了这个脚本。
所以我想知道的是:有没有办法解决这个问题？
非常感谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-26 14:38:05
我已经修好了！
奇怪的是，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();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16235088
复制相关文章
相似问题
腾讯云开发者
