Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/398.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 悬停后暂停视频_Javascript_Html_Jquery_Css - Fatal编程技术网

Javascript 悬停后暂停视频

Javascript 悬停后暂停视频,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我有以下代码在悬停时播放视频,但我需要它在不悬停时停止播放。我需要向JS中添加什么才能使其正常工作 <div class="padding-box height-40"> <div> <div class="media_link_overlay" id="video-home"></div> </div>

我有以下代码在悬停时播放视频,但我需要它在不悬停时停止播放。我需要向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>

该方法有两个处理函数,一个是
handlerIn
,另一个是
handlerOut
。目前,您只使用第一个处理程序。您可以同时使用这两个选项,并使视频
在悬停时播放
,在悬停时播放
,如下所示:

$("#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;
  }
);