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

How to stop an iframe player (and stop it playing) on modal popup close

本文关键字：iframe 播放器播放模式窗口更新时间：2023-09-26

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

我找到了一段代码，可以在单击关闭按钮时成功停止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="{"id":"videos_all_post-30230","theme":"27529","meta":{"display":{"size":"large","overlay_disabled":0,"custom_width":"600","custom_width_unit":"px","custom_height":"","custom_height_unit":"px","custom_height_auto":0,"location":"center top","position_top":100,"position_left":0,"position_bottom":0,"position_right":0,"position_fixed":0,"animation_type":"slide","animation_speed":350,"animation_origin":"top"},"close":{"overlay_click":0,"esc_press":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&controls=1&wmode=opaque&rel=0&egm=0&iv_load_policy=3&hd=1&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 . . . &color=333333&sharing=false&show_artwork=true&player_width=300" kwframeid="1"></iframe>

更新：

这是一个 Plunker，演示了 youtube 视频如何在模式弹出窗口关闭时停止播放。 Soundcloud音频也需要一些魔术代码才能发生同样的事情。

任何关于此的指示将不胜感激。

我能够通过以下代码实现针对我的情况的解决方案。它似乎在单击关闭按钮时重新加载 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>

欢迎评论。