当鼠标悬停在视频上时显示暂停/播放图标

Question

所以这段代码按预期工作。Hover/mouseenter/mouseleave正确显示和显示暂停/播放图标。

我的问题是在页面加载暂停图标不显示悬停/鼠标输入?它只工作后第一次点击…任何帮助都很感激，谢谢。

// HTML
<div class="video-container">
<div class="video-controls"> </div>
<video autoplay muted loop id="myVideo">
<source src="img/video.mp4" type="video/mp4" />
</video>
</div>
// END HTML
// jQuery
// Show video Play/Pause icons
$("#myVideo").mouseenter(function() {
$('.video-controls').show();
}).mouseleave(function() {
$('.video-controls').hide();
});

// Pause/Play video on hover
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
$('.video-controls').html('<i class="fas fa-pause-circle pause"></i>');
} else {
vid.pause();
$('.video-controls').html('<i class="fas fa-play-circle play"></i>');
}
});

Answer 1

谢谢你的问题，

这是解决方案，试一次

// HTML
<div class="video-container">
<div class="video-controls"><i class="fas fa-pause-circle play"></i></div>
<video autoplay muted loop id="myVideo">
<source src="img/video.mp4" type="video/mp4" />
</video>
</div>
// END HTML
// jQuery
// Show video Play/Pause icons
$("#myVideo").mouseenter(function() {
$('.video-controls').show();
}).mouseleave(function() {
$('.video-controls').hide();
});

// Pause/Play video on hover
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
$('.video-controls').html('<i class="fas fa-pause-circle pause"></i>');
} else {
vid.pause();
$('.video-controls').html('<i class="fas fa-play-circle play"></i>');
}
});

我发现点击事件后，你已经绑定了html，所以我们需要默认状态，所以只需设置默认视频控制播放图标。

希望这将排序您的查询。

Answer 2

"我的问题是在页面加载暂停图标不显示在悬停/鼠标输入?
只在第一次点击后生效。">

您可以尝试侦听悬停事件，而不是绑定(连接)到，单击事件:

//# Pause/Play video on hover
// $("#myVideo").bind("click", function () {
$("#myVideo").hover(function() {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
$('.video-controls').html('<i class="fas fa-pause-circle pause"></i>');
} else {
vid.pause();
$('.video-controls').html('<i class="fas fa-play-circle play"></i>');
}
});