setTime 0 на каждом видео в конце

Question

У меня есть 3 или 4 таких модуля на каждой странице. (класс "boxvideo1" и идентификатор "boxvideo4" добавляются js)

    <div class="servicios__layout">
      <div class="grid">
        <div class="box boxvideo1">
          <video id="boxvideo4" class="slider-video h" width="100%" style="visibility: visible; width: 100%;">
            <source src="//dl.dropbox.com/s/931244iox7i0fpk/working-with-espresso.mp4" type="video/mp4">
                  </video>
            <div class="icon-play"></div>
            <a href="https://google.es"><div class="icon-mas"></div></a>                  
        </div>
        <div class="box boxvideo2">
          <video id="boxvideo4" class="slider-video h" width="100%" style="visibility: visible; width: 100%;">
            <source src="//dl.dropbox.com/s/931244iox7i0fpk/working-with-espresso.mp4" type="video/mp4">
                  </video>
            <div class="icon-play"></div>
            <a href="https://google.es"><div class="icon-mas"></div></a>                  
        </div>
        </div>
      </div>

У меня есть 2 проблемы в js:

• Первый 1 его, идентификатор тэга всегда один и тот же и не является динамическим c. (Всегда есть boxvideo4)
• Во втором выпуске js не устанавливается значение currentTime равным 0.

var i = 1;
var str1 = 'boxvideo';
var str2 = '.boxvideo';
var str3 = 'boxvideo';

$('.servicios__layout .box').each(function (index, value) {

  var classAdd = str1 + i;
  var classCall = str2 + i;
  var classCall2 = str3 + i;

  $(this).addClass(classAdd);
  $('.servicios__layout .box .slider-video').attr('id', classCall2);

  $(classCall + ' .slider-video').on("ended", function () {
    $(classCall + " .icon-play").fadeIn();
    document.getElementById('classCall2').currentTime = 0;
  });

  i++;
});

Answer 1

Рассмотрим следующий код.

$(function() {
  var videos = $(".slider-video");
  videos.each(function(i, el) {
    $(el).attr("id", "box-video-" + (i + 1));
  });
  videos.on("ended", function() {
    $(this).get(0).currentTime = 0;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="servicios__layout">
  <div class="grid">
    <div class="box boxvideo1">
      <video id="boxvideo4" class="slider-video h" width="100%" style="visibility: visible; width: 100%;">
        <source src="//dl.dropbox.com/s/931244iox7i0fpk/working-with-espresso.mp4" type="video/mp4">
      </video>
      <div class="icon-play"></div>
      <a href="https://google.es">
        <div class="icon-mas"></div>
      </a>
    </div>
    <div class="box boxvideo2">
      <video id="boxvideo4" class="slider-video h" width="100%" style="visibility: visible; width: 100%;">
        <source src="//dl.dropbox.com/s/931244iox7i0fpk/working-with-espresso.mp4" type="video/mp4">
      </video>
      <div class="icon-play"></div>
      <a href="https://google.es">
        <div class="icon-mas"></div>
      </a>
    </div>
  </div>
</div>

Обновление

Чтобы сбросить id в вашем L oop, я бы использовал переменные, переданные в к вашей функции обратного вызова. Я использовал i для индекса и el для элемента.

Метод .each() разработан для того, чтобы сделать циклические конструкции DOM краткими и менее подверженными ошибкам. При вызове он перебирает элементы DOM, которые являются частью объекта jQuery. Каждый раз, когда выполняется обратный вызов, передается текущая итерация l oop, начиная с 0. Более важно, что обратный вызов запускается в контексте текущего элемента DOM, поэтому ключевое слово this относится к элементу.

Подробнее: https://api.jquery.com/each/