在django模板中悬停播放视频

Question

我通过迭代queryset对象来显示Django模板中的视频列表。我想在鼠标输入时播放特定的视频。

Django模板：

{% for video in videos %}
<div class="card bg-light pl-3" style="width:310px;height:300px;border:none">
<a href="{% url 'core:videoview' video.id %}"><video class="videocard" src="{{video.video_file.url}}" poster="{{video.thumbnail.url}}" alt="not found" style="height:185px" preload></a>
<div class="card-body">
<div class="row" style="">
<div class="fst pt-2 pl-3">
<img src="{{video.video_owner.channel_owner.profile_pic.url}}" class="rounded-circle" style="height:45px" alt="">
</div>
<div class="sec pt-2 pl-3">
<tr>
<p class="font-weight-bold""><a href="{% url 'core:videoview' video.id %}" style="text-decoration:none;color:black">{{video.video_title|truncatechars:"25"}}</a>
<br>
<a href="#" style="text-decoration:none;color:black"><span class="font-weight-normal">{{video.video_owner}}</span></a>
</p>
</tr>
</div>
</div>
</div>
</div>
{% endfor %}

JavaScript:

$(".videocard").on('mousenter', function(){
$('.videocard').get(0).play();
$('.videocard').get(0).currentTime = 0;
});
$(".videocard").on('mouseout', function(){
$('.videocard').get(0).pause();
$('.videocard').get(0).currentTime = 0;
});

但是由于get(0(，它只适用于视频列表中的第一个视频。如何使其适用于每个显示的视频？

Answer 1

您可以在此处使用事件关键字

$(".videocard").on('mousenter', function(event){
event.target.play();
event.target.currentTime = 0;
});
$(".videocard").on('mouseout', function(event){
event.target.pause();
event.target.currentTime = 0;
});