Question

我正在尝试在网站上建立一个类似界面的instagram故事。视频播放完毕后，将转到下一个视频。如果到达了最后一个视频，则从头开始。它几乎可以正常工作，但是我认为它不会将视频中的时间重置为0。单击以查看下一张幻灯片后，上一个视频只是暂停了，但是我希望它从头开始播放。

html：

<section id="stories">
  <div class="videos">
    <video>
      <source src="http://eriksachse.com/vids/3e448ae7aa11cf5e630bee08351a08e7.mp4">
    </video>
    <video>
      <source src="http://eriksachse.com/vids/55b2f2f1db1abffe5586d32dfc41e5b7.mp4">
    </video>
    <video>
      <source src="http://eriksachse.com/vids/5d8a1fb42008b3818cd5010522f667b4.mp4">
    </video>
    <video>
      <source src="http://eriksachse.com/vids/f9fa6cca5be68745621205ac6b1a9c5b.mp4">
    </video>
  </div>

  <div class="bar">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</section>

js：

$(document).ready(function() {

  var triggers = $('div.bar div.item');
  var videos = $('video');
  var lastElem = triggers.length - 1;
  var target;

  triggers.first().addClass('active');
  videos.hide().first().show().get(0).play();


  function sliderResponse(target) {
    console.log('Start!');
    videos.hide().eq(target).show();
    triggers.removeClass('active').eq(target).addClass('active');

    var current = videos.eq(target).get(0);

    //here I reset the time
    current.currentTime = 0;
    current.play();

    //function for finished video
    videos.eq(target).bind('ended', function(){
      target = $('div.bar div.active').index();
      target === lastElem ? target = 0 : target = target + 1;
      sliderResponse(target);
    });
  }

  triggers.click(function() {
    if (!$(this).hasClass('active')) {
      target = $(this).index();
      sliderResponse(target);
      //resetTiming();
    }
  });

  $('video').click(function() {
    target = $('div.bar div.active').index();
    target === lastElem ? target = 0 : target = target + 1;
    sliderResponse(target);
    //resetTiming();
  });
})

提琴：https://jsfiddle.net/eriksachse/a9s51hq6/

jQuery视频结束功能->如何重置视频？

0 个答案: