我正在设计一个页面，当用户悬停在帖子上时，我希望在其中播放每个帖子的视频。我把它设置成这样：
<div class="project-link-block">
<div class="video-cover">
<video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover">
<source src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e" type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<script>
$(document).ready(function() {
$(".playonhover").on("mouseover", function(event) {
this.play();
}).on('mouseout', function(event) {
this.pause();
});
})
</script>
这是可行的，但我实际上希望视频在顶部div(class.project-link块(悬停时播放，而不是视频本身。有办法做到这一点吗？在JS中切换类不起作用。如果相关的话，可以使用Webflow。
在切换类时是否也更改了this？一旦切换了类，视频元素就不再是this。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<div class="project-link-block">
<div class="video-cover">
<video class="playonhover" height="100%" width="100%" muted playsinline loop data-object-fit="cover">
<source
src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e"
type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<script>
$(document).ready(function () {
$(".video-cover").on("mouseover", function (event) {
$(".playonhover").get(0).play();
}).on('mouseout', function (event) {
$(".playonhover").get(0).pause();
});
})
</script>
看看下面的代码是否达到了预期的结果。然后转换为JQuery(如果需要(。
<!DOCTYPE html>
<html>
<body>
<div class="project-link-block">
<div class="video-cover">
<video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover">
<!-- <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> -->
<source type="video/mp4"
src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e"
>
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<script>
window.addEventListener( "load", on_documentReady );
function on_documentReady()
{
//const myTargets = document.getElementsByClassName("playonhover");
const myTargets = document.getElementsByClassName("project-link-block");
for (var i = 0; i < myTargets.length; i++)
{
myTargets[i].onmouseover = handle_mouseOver;
myTargets[i].onmouseout = handle_mouseOut;
}
}
function handle_mouseOver( evt )
{
//alert( "## was rolled over" );
evt.target.play();
}
function handle_mouseOut( evt )
{
//alert( "## was rolled out" );
evt.target.pause();
}
</script>
</body>
</html>