所有具有相同类的视频都会在悬停时自动播放，而不是只有一个带有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

这里有一些问题的例子。。所有具有相同类的视频都在悬停状态下自动播放，而不是只有一个具有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;
});
});

Answer 2

您只需在Ready上完成即可。

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

Answer 3

我认为更好的实现是这样的，并且不使用for循环：

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>