Question

我想在bootstrap 3.3.4 carousel上的活动幻灯片上播放html5视频，并在下一张或上一张幻灯片时停止这里是我的示例js code

$('#myCarousel').bind('slid', function (e) {
$('#videoId').get(0).play()
});

这是我的代码http://jsfiddle.net/umergetsol/vq6pjagr/

Answer 1

这是我的解决方案，我不知道它的效率与否，但对我来说效果很好:)。

 $("#video").on('slid.bs.carousel', function (e) {
 $("#video .video").empty();
 $("#video .item.active").addClass('animated fadeIn');
 $("#video #vid-1.active .video").append('<video muted loop autoplay class="media-player" src="videos/4696286.mp4" id="fast"><source src="videos/4696286.mp4" type="video/mp4"></source></video>');
 $("#video #vid-2.active .video").append('<video muted loop autoplay class="media-player" src="videos/7883158.mp4" id="fast"><source src="videos/7883158.mp4" type="video/mp4"></source></video>');
 $("#video #vid-3.active .video").append('<video muted loop autoplay class="media-player" src="videos/8075803.mp4" id="fast"><source src="videos/8075803.mp4" type="video/mp4"></source></video>');
 $("#video #vid-4.active .video").append('<video muted loop autoplay class="media-player" src="videos/1138051.mp4" id="fast"><source src="videos/1138051.mp4" type="video/mp4"></source></video>');
 $("#video #vid-5.active .video").append('<video muted loop autoplay class="media-player" src="videos/1675216.mp4" id="fast"><source src="videos/1675216.mp4" type="video/mp4"></source></video>');
});

在bootstrap 3.3.4活动轮播上播放html视频并在下一个或上一个停止播放

1 个答案: