一旦视频完成，暂停并恢复滑动滑块

我有一个slick.js滑块，其中包含视频，我希望滑块在到达视频幻灯片后暂停并在视频完成后继续循环，无需用户交互。我可以在一个循环中使用此功能来处理第一个视频，但在第二个视频幻灯片中，一旦视频完成，滑块将不会恢复。一旦视频完成，暂停并恢复滑动滑块

Fiddle

我有写出来的时候，视频播放完毕，但一旦第二视频完成也不会说什么控制台日志。我相信它没有看到播放滑动滑块的功能。

  function myHandler(e) {   
      console.log('Video Complete') 
      $('.sliderMain').slick('slickPlay'); 
     }

来源

2015-07-21 Matthew Johnson

你只第一video标签绑定到您的myHandler功能：

// It only gets the first element 
var video = document.getElementsByTagName('video')[0]; 
video.addEventListener('ended',myHandler,false);

由于您使用jQuery，您可以绑定在视频播放这样结束了一个事件：

$('video').on('ended',function(){   
    console.log('Video Complete') 
    $('.sliderMain').slick('slickPlay'); 
});

jQuery demo

JavaScript eq uivalent会是这样：

var videos = document.getElementsByTagName('video'); 

for (var i=0; i<videos.length; i++) { 
    videos[i].addEventListener('ended',myHandler,false); 
}

JavaScript demo

来源

2015-07-21 18:49:02 TheWanderingMind

这正是我需要它做的，谢谢！ –

不客气马修。 – TheWanderingMind

SlickSlider反应灵敏，需要工作360（所有设备）。您的解决方案不适用于手机，因为禁止自动播放视频。

此解决方案允许同时播放多个视频，这是次优的。

更好的解决方案是只有在用户播放视频时才暂停转盘，并在检测到幻灯片时恢复转盘（暂停视频）。

来源

2015-08-20 18:42:58

这将在电视上免费播放，因此用户输入将不再需要，也不会在移动设备上显示。虽然感谢您的关注！ –

排序使用响应旋转木马的目的，这是非常有限的。您可能有必要为电视写一个定制的轮播，这会暂停幻灯片之间的视频。让多个视频一起在屏幕外运行仍然是您的问题。 –

我已经完成了，因为幻灯片不是互动的，视频将在下一张幻灯片播放前完成。没有任何东西跑出屏幕 –

一旦视频完成，暂停并恢复滑动滑块

回答

相关问题