Question

我有以下代码可以在悬停时播放视频，但是我需要它在不悬停时停止播放。我需要在JS中添加什么才能使它起作用？

<div class="padding-box height-40">
                <div>
                    <div class="media_link_overlay" id="video-home"></div>
                </div>
                <div class="background">
                    <div class="content">
                        <div class="text">
                            <video id="video-hover" width="100%" height="100%" preload="auto" onMouseover="mouseoversound.playclip()">
                                 <source type="video/mp4" src="<?php echo get_template_directory_uri().'/videos/homepage_thx.mp4';?>" />
                            </video>
                        </div>
                    </div>      

<script>
$("#video-home").hover(function(){
    $("#video-home")[0].play();
});
</script>

Answer 1

.hover()方法具有两个处理函数，一个是handlerIn，另一个是handlerOut。当前，您仅使用第一个处理程序。您可以同时使用两者，并在悬停时制作视频play，在悬停时制作pause，例如：

$("#video-home").hover(
  function() {
    $("#video-home")[0].play();
  },
  function() {
    $("#video-home")[0].pause();
  }
);

如果您想完全停止播放视频并使它从下一次悬停开始时开始播放，则可以使用：

$("#video-home").hover(
  function() {
    $("#video-home")[0].play();
  },
  function() {
    $("#video-home")[0].pause();
    $("#video-home")[0].currentTime = 0;
  }
);

悬停后暂停视频

1 个答案: