magnific-popup,如何在弹出窗口打开时播放音频文件并在关闭时停止播放
magnific-popup, how to play an audio file when popup open and stop playing when closing it
我正在使用magnific-popup来显示图片...
是否可以在弹出窗口 window 打开时开始播放 au 音频文件并在关闭 window 时停止播放?
<a href="images/capoeira.jpg" class="fh5co-project-item image-popup to-animate">
<img src="images/berimbau.jpg" alt="Animason groupes" class="img-responsive">
<div class="fh5co-text">
<h1>ANIMA'SON</h1>
<span>Participants: minimum 10, maximum: 20</span>
</div>
</a>
我通过在每个图像弹出窗口中添加一个音频标签来解决它 link
<a href="images/capoeira.jpg" data-sound="berimbau" class="fh5co-project-item image-popup to-animate">
<img src="images/berimbau.jpg" alt="Animason groupes" class="img-responsive">
<div class="fh5co-text">
<h1>ANIMA'SON</h1>
<h2>60€ / heure / groupe</h2>
<span>Participants: minimum 10, maximum: 20</span>
</div>
<audio id="berimbau-audio" loop="loop" preload="none">
<source src="./sounds/berimbau.ogg" type="audio/ogg">
<source src="./sounds/berimbau.mp3" type="audio/mpeg">
</audio>
</a>
并使用数据声音参数和 audio.id
将回调添加到他的 magnific-popup-options.js
$(document).ready(function() {
var soundName;
var audioElement;
// MagnificPopup
$('.image-popup').magnificPopup({
....
callbacks: {
elementParse: function(item) {
soundName = item.el[0].attributes['data-sound'].value;
audioElement= document.getElementById(soundName + "-audio")
audioElement.load();
},
close: function() {
audioElement.pause();
},
change: function() {
audioElement.play();
}
},
});
});
我正在使用magnific-popup来显示图片... 是否可以在弹出窗口 window 打开时开始播放 au 音频文件并在关闭 window 时停止播放?
<a href="images/capoeira.jpg" class="fh5co-project-item image-popup to-animate">
<img src="images/berimbau.jpg" alt="Animason groupes" class="img-responsive">
<div class="fh5co-text">
<h1>ANIMA'SON</h1>
<span>Participants: minimum 10, maximum: 20</span>
</div>
</a>
我通过在每个图像弹出窗口中添加一个音频标签来解决它 link
<a href="images/capoeira.jpg" data-sound="berimbau" class="fh5co-project-item image-popup to-animate">
<img src="images/berimbau.jpg" alt="Animason groupes" class="img-responsive">
<div class="fh5co-text">
<h1>ANIMA'SON</h1>
<h2>60€ / heure / groupe</h2>
<span>Participants: minimum 10, maximum: 20</span>
</div>
<audio id="berimbau-audio" loop="loop" preload="none">
<source src="./sounds/berimbau.ogg" type="audio/ogg">
<source src="./sounds/berimbau.mp3" type="audio/mpeg">
</audio>
</a>
并使用数据声音参数和 audio.id
将回调添加到他的 magnific-popup-options.js$(document).ready(function() {
var soundName;
var audioElement;
// MagnificPopup
$('.image-popup').magnificPopup({
....
callbacks: {
elementParse: function(item) {
soundName = item.el[0].attributes['data-sound'].value;
audioElement= document.getElementById(soundName + "-audio")
audioElement.load();
},
close: function() {
audioElement.pause();
},
change: function() {
audioElement.play();
}
},
});
});