我有一个使用Slick的2幻灯片轮播,每个幻灯片都包含一个视频,该视频是从Wordpress中的自定义(ACF)媒体字段中提取的(托管文件,而不是来自YouTube的嵌入文件)。如果我在一个视频上点击“播放”,然后导航到下一张幻灯片,则该视频将继续播放,因此我们仍然可以听到声音。
这样做是有道理的,但这不是我需要做的。更改幻灯片时,我想暂停所有视频。
这就是我所拥有的。
HTML:
<div class="project-carousel">
<div class="slidewrap">
<div class="slide">
<div class="leftcol">
<div style="width: 640px;" class="wp-video"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
<video class="wp-video-shortcode" id="video-220-1" width="640" height="360" poster="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/ChloeRosser_Breath1.png" preload="metadata" controls="controls"><source type="video/mp4" src="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-1.mp4?_=1" /><a href="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-1.mp4">https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-1.mp4</a></video>
</div>
</div>
<div class="rightcol">
<ul class="nostyle nopad mid-grey">
<li class="dark-grey">Breath 1</li>
<li class="small">2018</li>
</ul>
</div>
</div>
</div>
<div class="slidewrap">
<div class="slide">
<div class="leftcol">
<div style="width: 640px;" class="wp-video">
<video class="wp-video-shortcode" id="video-220-2" width="640" height="360" poster="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/ChloeRosser_Breath2.png" preload="metadata" controls="controls"><source type="video/mp4" src="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-2.mp4?_=2" /><a href="https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-2.mp4">https://cro.matmartin.co.uk/wp-content/uploads/2020/02/Breath-2.mp4</a></video>
</div>
</div>
<div class="rightcol">
<ul class="nostyle nopad mid-grey">
<li class="dark-grey">Breath 2</li>
<li class="small">2018</li>
</ul>
</div>
</div>
</div>
</div>
jQuery:
$('.project-carousel').slick({
speed: 500,
fade: true,
cssEase: 'linear',
});
整个内容都可以查看here。这是客户的艺术品,如果规则非常严格,可以视为NSFW。
谢谢。
答案 0 :(得分:0)
只需从下面的演示中获取此脚本即可,然后替换您的脚本。
然后点击网站更改幻灯片上的箭头,让我知道install.packages("A", dependencies=FALSE)
的结果是什么。
阅读我的脚本中的注释,以便了解发生了什么。
console.log
// project carousel slick options
$('.project-carousel').slick({
speed: 500,
fade: true,
cssEase: 'linear'
// before slide change
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
// current slide
let slide = $('[data-slick-index="' + currentSlide + '"]', this);
// find video in this slide by mediaelementwrapper
let video = $('MEDIAELEMENTWRAPPER > VIDEO', slide);
// if we have a video in this slide
if (video.length) {
// please send me what this outputs on your site when you click next slide
// we might be able to hook into the mediaelementjs object from here and pause the video
console.log(video);
// also uncomment this and try this
// $(video).paused = true;
}
});