在光滑的旋转木马中添加视频自动播放
我在我的页面上使用光滑的旋转木马http://kenwheeler.github.io/slick/，现在我需要添加带有自动播放的视频。
我使用这个代码
HTML
<div class="main-slider" id="main-slider">
<div>
<div class="video-wrapper">
<video autoplay loop class="pageBackground-video">
<source src="/Content/video/332145276.mp4" type="video/mp4">
</video>
</div>
</div>
<div>
<div class="video-wrapper">
<video autoplay loop class="pageBackground-video">
<source src="/Content/video/332145276.mp4" type="video/mp4">
</video>
</div>
</div>
</div>和剧本
$('#main-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 30000,
dots: true,
infinite: true,
adaptiveHeight: true,
arrows: false
});但是自动播放不起作用。有什么办法让自动播放工作吗？
upd我尝试使用
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
var video = currentSlide.children('video').get(0).play();
});但是我得到了一个错误Uncaught TypeError: currentSlide.children is not a function，因为currentSlide它只是一个数字(0,1，等等)。如何获取当前元素？
upd2 --我使用了这段代码，它可以工作。
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
$('#main-slider .slick-slide').find('video').get(0).pause();
var video = $('#main-slider .slick-active').find('video').get(0).play();
});但是现在自动播放对于所有的视频都是完美的，但只有在第一次巧妙的改变之后。如何使它工作后的第一个视频页面只加载。
upd3我使用了以下代码
var video = $('#main-slider .slick-active').find('video').get(0).play();
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
$('#main-slider .slick-slide').find('video').get(0).pause();
var video = $('#main-slider .slick-active').find('video').get(0).play();
});现在所有的代码都可以按我的意愿工作，但恐怕我的代码很难看(
回答 5
Stack Overflow用户
发布于 2020-03-04 13:29:52
您可以使用光滑的文档中的函数。
// On slide change, pause all videos
$('#main-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('video').each(function() {
$(this).get(0).pause();
});
});
// On slide chnage, play a video inside the current slide
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
if( $('.project-slide.slick-current').find('video').length !== 0) {
$("#main-slider .slick-current video")[0].play();
}
});Stack Overflow用户
发布于 2021-08-22 01:56:43
您可以在所有浏览器中将muted添加到视频标记到autoplay中。此外，在移动设备上自动播放还需要playsinline。
<video autoplay muted playsinline></video>我知道，如果您的视频有声音，这是没有帮助的，但声音立即播放在最初的页面加载可能不是首选。
Stack Overflow用户
发布于 2015-05-02 18:46:33
这一行代码
.find(‘视频’).get(0).pause()；
在afterChange内部，回调函数将暂停幻灯片容器中的所有视频，而不管视频播放与否。
如果有100张幻灯片，它会暂停所有100个视频，尽管它们没有播放。最好是找到上一张幻灯片，只暂停幻灯片中的视频。
https://stackoverflow.com/questions/29901228
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号