如何在模态弹出窗口关闭时停止iframe播放器(并停止播放)

时间:2016-02-19 23:24:35

标签: javascript iframe

在用户点击标题或图片时在模态类型弹出窗口中打开各种项目的页面中,某些项目包括视频,其他项目包括音频。

我找到了一段代码,可以在单击关闭按钮的情况下在iframe中成功停止Youtube视频。没有它,视频会在弹出窗口关闭后继续播放。我努力成功修改代码以类似的方式阻止其他玩家。我怎么能为Soundcloud iframe实现这个目的呢?

这是我目前正在成功使用youtube iframe的代码:

<div class="wm_container slug_videos all"> <div class="videos_content_wrap"> <div id="popmake-videos_all_post-30230" class="popmake theme-27529 responsive size-large" data-popmake="{&quot;id&quot;:&quot;videos_all_post-30230&quot;,&quot;theme&quot;:&quot;27529&quot;,&quot;meta&quot;:{&quot;display&quot;:{&quot;size&quot;:&quot;large&quot;,&quot;overlay_disabled&quot;:0,&quot;custom_width&quot;:&quot;600&quot;,&quot;custom_width_unit&quot;:&quot;px&quot;,&quot;custom_height&quot;:&quot;&quot;,&quot;custom_height_unit&quot;:&quot;px&quot;,&quot;custom_height_auto&quot;:0,&quot;location&quot;:&quot;center top&quot;,&quot;position_top&quot;:100,&quot;position_left&quot;:0,&quot;position_bottom&quot;:0,&quot;position_right&quot;:0,&quot;position_fixed&quot;:0,&quot;animation_type&quot;:&quot;slide&quot;,&quot;animation_speed&quot;:350,&quot;animation_origin&quot;:&quot;top&quot;},&quot;close&quot;:{&quot;overlay_click&quot;:0,&quot;esc_press&quot;:1}}}" style="visibility: visible; display: none;"> <div class="popmake-title">title</div> <div class="popmake-content"> <iframe id="iF_xxUHxxxPexx" width="1280" height="480" src="http://www.youtube.com/embed/xxUHxxxPexx?autoplay=1&amp;controls=1&amp;wmode=opaque&amp;rel=0&amp;egm=0&amp;iv_load_policy=3&amp;hd=1&amp;vq=hd720" frameborder="0" style="" allowfullscreen="" kwframeid="11"></iframe> </div> <a class="popmake-close">×</a> </div> </div> <script type="text/javascript"> jQuery('videos_all_post-30230') .on('popmakeBeforeClose', function () { var $iframe = jQuery('iframe', jQuery(this)), src = $iframe.prop('src'); $iframe.prop('src', '').prop('src', src.replace('?autoplay=1', '')); }); </script> </div>

这是一个soundcloud iframe的例子:

<iframe class="soundCloudiframe-30235" width="" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player?url=https%3A%2F%2Fsoundcloud.com%2F . . . &amp;color=333333&amp;sharing=false&amp;show_artwork=true&amp;player_width=300" kwframeid="1"></iframe>

更新

This是一个Plunker,用于演示youtube视频在关闭模态弹出窗口时如何停止播放。使用Soundcloud音频时需要一些神奇的代码。

对此的任何指示都将非常感激。

1 个答案:

答案 0 :(得分:0)

我能够使用以下代码为我的情况找到解决方案。它似乎在点击关闭按钮时重新加载iframe的src属性,从而停止播放当前播放器并准备好再次播放iframe。

<script type="text/javascript"> function loadIframe(iframeName, url) { var $iframe = jQuery('#' + iframeName); if ($iframe.length) { $iframe.attr('src',url); // here you can change src return false; } return true; } jQuery('.popmake-close').click(function() { var frame_src = document.getElementById('soundCloudiframe-30235').src; loadIframe('soundCloudiframe-30235', frame_src); }); </script>

欢迎评论。