wordpress - 关闭后,华丽的弹出式 Wordpress 音频简码继续播放
问题描述
我使用 Magnific Popup 和 wp_audio_shortcode() 函数为我的自定义 Wordpress 主题创建了一个内联弹出窗口。它工作得很好,除了当我关闭弹出窗口时音频继续播放。(嵌入式视频完全按预期停止,这很棒!)
我读了这篇文章magnific-popup,如何在弹出窗口打开时播放音频文件并在关闭它时停止播放,但它并没有完全解决我的问题;我收到几个 javascript 错误。
任何帮助将不胜感激!
这是我的函数呈现的弹出窗口的 HTML。我已删除无关的内容,例如网址和多行标题。
链接人们点击:
<a href="#popup-3" data-audio="audio-3" data-effect="popup-with-zoom-anim" class="open-popup-link popup-with-zoom-anim has_thumb" style="background-image:url('graphic.jpg') "><span class="pop-up-wrapper"><h2 class="homecard-title">Link Text</h2></span></a>
出现的弹出窗口:
<div id="popup-3" class="pop-up-post zoom-anim-dialog">
<div class="pop-up-left"><img src="graphic.jpg" class="pop-up-back-image"></div>
<div class="pop-up-right">
<h2 class="homecard-title">Headline Here<br><span class="play-wrapper" id="audio-3"><!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
<audio class="audio-3" id="audio-104-1" preload="none" style="width: 100%;" controls="controls"><source type="audio/mpeg" src="http://vivenne:8888/wp-content/uploads/2019/04/Vivienne-Leheny-Hot-Winter-NIghts-Lucas-Mom.mp3?_=1"><a href="http://vivenne:8888/wp-content/uploads/2019/04/Vivienne-Leheny-Hot-Winter-NIghts-Lucas-Mom.mp3">http://vivenne:8888/wp-content/uploads/2019/04/Vivienne-Leheny-Hot-Winter-NIghts-Lucas-Mom.mp3</a></audio></span></h2>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
Magnific 的 jquery(直接取自网站):
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in',
});
单击关闭按钮时,我希望音频停止播放,但它会在后台继续播放。
解决方案
各位,我解决了。我放弃了wp_audio_shortcode()
,这使得为<audio>
元素分配 ID 变得更加容易。
我很高兴提供所有代码,但我认为它在上下文之外令人困惑。以下是重要的花絮……
magnificPopup 容器获取data-ref
与其中包含的音频播放器 ID 匹配的属性。(我用一个简单的$count
变量来做这个,因为页面上有几个弹出窗口。)
magnificPopup jQuery 的重要部分是:
callbacks: {
close: function(){
var magnificPopupVar = $.magnificPopup.instance,
magnificPopupSrc = magnificPopupVar.currItem.src,
magnificPopupRef = $(magnificPopupSrc).attr('data-ref'),
audioplayer = document.getElementById('audio-popup-'+magnificPopupRef);
audioplayer.pause();
}
}
在上下文中:
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
modal:false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in',
callbacks: {
close: function(){
var magnificPopupVar = $.magnificPopup.instance,
magnificPopupSrc = magnificPopupVar.currItem.src,
magnificPopupRef = $(magnificPopupSrc).attr('data-ref'),
audioplayer = document.getElementById('audio-popup-'+magnificPopupRef);
audioplayer.pause();
}
}
});
我希望这对其他人试图解决这个问题有帮助!
推荐阅读
- angular - node_modules 包含 es6 代码不会以角度编译为 es5?
- azure - Microsoft Intune - Can you cancel a request to wipe a device?
- javascript - SVGs not rendered in Firefox 60 sometimes
- facebook - CORS:如何保护 Facebook Leadgen Webhook?
- android - RecyclerView - 删除行总是删除最后一个
- c++ - why complete string is not printing at once but when i try character by character its printing
- c - 关于指针的几处干扰
- android - how to show notification with play/pause in exoplayer?
- android - 为 EditText 定义一个值
- python - Python2: multiprocessing using a Pool of workers with multiple arguments