如何使用 JavaScript 在鼠标悬停和鼠标悬停时播放视频？

在本文中，我们将学习如何在鼠标悬停在视频上时播放视频，以及如何在鼠标从视频元素上移开时停止播放。有时我们希望网站上的视频在用户将鼠标悬停在其上时自动开始播放，因为它减少了用户在网站上的点击次数并为用户提供了良好的体验。所以为了达到这个目的，我们使用javascript让它在鼠标悬停在它上面时可以播放，当鼠标出来时它会自动停止播放。

方法：首先，我们将一个视频文件附加到我们的 HTML DOM，然后使用 javascript 在其上应用 mouseover 和 mouseout 事件侦听器。下面是完整的代码实现：

示例：在此示例中，我们将使用纯 javascript 来播放视频。

HTML

  

    
    
    

  

  
    
    
    
  
    
  
        // Targeting video element 
        let clip = document.querySelector(".vid")
  
        /* Applying mouseover event on video clip 
        and then we call play() function to play 
        the video when the mouse is over the video */
        clip.addEventListener("mouseover", function (e) {
            clip.play();
        })
  
        /* Applying mouseout event on video clip 
        and then we call pause() function to stop 
        the video when the mouse is out the video */
        clip.addEventListener("mouseout", function (e) {
            clip.pause();
        })
    

  

输出：

浏览器输出