JQuery видео по окончании функции -> Как сбросить видео? - PullRequest
0 голосов
/ 09 ноября 2019

Я пытаюсь создать на своем сайте историю в стиле 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...