Все видео с одинаковым классом автоматически воспроизводятся при наведении вместо одного с jQuery

Question

Таким образом, у меня есть три видео на странице, и я хочу автоматически воспроизвести только одно, когда наведу на него курсор, и все работает, за исключением того факта, что при наведении курсора на одно видео все видео на странице начинают воспроизводиться

Вот мои HTML:

        <div class="product_bl d-flex align-items-stretch flex-column">
          <video class='videohover' width="360" height="auto" loop muted>
            <source src="assets/img/pages/landingpage.mp4" type="video/mp4">
          </video>
        </div>

        <div class="product_bl d-flex align-items-stretch flex-column">
          <video class='videohover' width="360" height="auto" loop muted>
            <source src="assets/img/pages/multilandingpage.mp4" type="video/mp4">
          </video>
        </div>

        <div class="product_bl d-flex align-items-stretch flex-column">
          <video class='videohover' width="360" height="auto"  loop muted>
            <source src="assets/img/pages/blogpage.mp4" type="video/mp4">
          </video>
        </div>

И jQuery:

  var $vids = $('.videohover');

  for(let i=0; i<$vids.length; i++){
    $vids.on('mouseenter', function(){
      $vids.get(i).play();
    });
    $vids.on('mouseout', function(){
        $vids.get(i).pause();
    });
  }

Мне кажется, я упускаю что-то очевидное

Answer 1

Вы можете просто сделать это в готовности.

$(document).ready(function(){
    $('.videohover').on('mouseenter', function(e){
      e.target.play();
    });
    $('.videohover').on('mouseout', function(){
        e.target.pause();
    });
});

Answer 2

Я думаю, что лучшая реализация будет такой, без использования для l oop:

var $vids = $('.videohover')
  .on('mouseenter', function(e){
    this.play();
  })
  .on('mouseout', function(e){
     this.pause();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product_bl d-flex align-items-stretch flex-column">
  <video class='videohover' width="360" height="auto" loop muted>
    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  </video>
</div>

<div class="product_bl d-flex align-items-stretch flex-column">
  <video class='videohover' width="360" height="auto" loop muted>
    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  </video>
</div>

<div class="product_bl d-flex align-items-stretch flex-column">
  <video class='videohover' width="360" height="auto"  loop muted>
    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  </video>
</div>

Answer 3

вот несколько примеров для вашей проблемы. Все видео с одним и тем же классом автоматически воспроизводятся при наведении курсора вместо одного с jQuery

$(document).ready(function(){
  $(".product_bl").hover(
    function() {
      $(this).children("video").get(0).play();
    }, function() {
       $(this).children("video").get(0).pause();
       
    });
});

.product_bl {
    width:50%;
    float:left;
    height: auto;
    padding:10px;
    box-sizing:border-box;
}
video.videohover {
    width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="product_bl d-flex align-items-stretch flex-column">
  <video class='videohover' width="360" height="auto" loop muted>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>
</div>

<div class="product_bl d-flex align-items-stretch flex-column">
  <video class='videohover' width="360" height="auto" loop muted>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
  </video>
</div>

<div class="product_bl d-flex align-items-stretch flex-column">
  <video class='videohover' width="360" height="auto"  loop muted>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
  </video>
</div>

еще один пример jQuery для повторного запуска видео при наведении

$(document).ready(function(){
  $(".product_bl").hover(
    function() {
      $(this).children("video").get(0).play();
    }, function() {
       $(this).children("video").get(0).pause();

       // Use if you want your video restart on hover again
       $(this).children("video").get(0).currentTime = 0;

    });
});