我在我的页面上使用光滑的轮播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>
Run Code Online (Sandbox Code Playgroud)
和脚本
$('#main-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 30000,
dots: true,
infinite: true,
adaptiveHeight: true,
arrows: false
});
Run Code Online (Sandbox Code Playgroud)
但是自动播放不起作用.有没有办法让自动播放工作?
我尝试使用upd
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
var video = currentSlide.children('video').get(0).play();
});
Run Code Online (Sandbox Code Playgroud)
但我得到一个错误,Uncaught TypeError: currentSlide.children is not a function因为currentSlide它只是一个数字(0,1等).如何获得当前元素?
upd2我使用这个代码,它的工作原理 …
我正在使用从http://kenwheeler.github.io/slick/下载的光滑滑块
我有许多自动播放图像正确显示,但是,我还有一个无法自动播放的 mp4 文件。这是我的 HTML:
<section class="regular slider" style="width: 900px; left: 60px; top: 230px;">
<div>
<video autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
<div>
<img src="https://placehold.it/350x300?text=2">
</div>
<div>
<img src="https://placehold.it/350x300?text=3">
</div>
</section>
Run Code Online (Sandbox Code Playgroud)
这是我的脚本:
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
});
});
</script>
Run Code Online (Sandbox Code Playgroud)