Question

我希望达到这样的效果：当用户的鼠标进入视频帧时，它将触发电影。此外，当用户的鼠标离开视频时，它仍将继续播放。

但是，当用户的鼠标再次进入视频帧时，视频将暂停。有没有办法实现这个目标？我是这个领域的新手。

这是我到目前为止所拥有的：

JQuery的：

$(document).ready(function(){
   $('#video1').mouseover(
        function()
            {
                $(this).get(0).play();
            }
        );
    });

HTML：

<video id = "video1" width = "420">
    <source src = "lololol.mp4" type = "video/mp4">
</video>

Answer 1

只需检查视频的状态即可。而是使用mouseenter事件。

$('#video1').mouseenter(
   function()
   {
      if($(this).get(0).paused)
          $(this).get(0).play();
      else
          $(this).get(0).pause();
   }
);

Answer 2

你可能想要创建一个变量，在mouseenter上增加它，并检查它的值是偶数还是奇数：

var movieHoverCt = 0;

$('#video1').mouseenter(function () {
    if (movieHoverCt % 2 === 0) { // even
        $(this).get(0).play();
    } else { // odd
        $(this).get(0).stop();
    }
    movieHoverCt++;
});

通过使用JQuery，如何在鼠标输入一次时播放视频并在鼠标输入两次时暂停视频？

2 个答案: