如何解决更改幻灯片后,在“滑动”滑块中暂停视频
我有一个使用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。
谢谢。
解决方法
只需从下面的演示中获取此脚本即可,然后替换您的脚本。
然后点击网站更改幻灯片上的箭头,让我知道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;
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。