使用视频 DOM 暂停和播放 .mp4 onmouseover/onmouseout答案

【问题标题】：Use video DOM to pause and play .mp4 onmouseover/onmouseout使用视频 DOM 暂停和播放 .mp4 onmouseover/onmouseout
【发布时间】：2012-03-25 01:52:28
【问题描述】：

我正在将一个 WordPress 网站放在一起，其中有一个缩略图菜单，当点击该菜单时，将在页面上显示一个大视频。

我的客户希望缩略图在光标位于缩略图上方时播放几秒钟的视频，并在光标离开时返回其开始状态。

我在 w3schools 上看到了一个为此目的使用按钮的实例。当我将命令从 onclick 更改为 onmouseover 时，它播放/暂停了视频。我希望能够直接在视频上而不是按钮上进行。

这是（大部分）来自 w3schools 的代码：

 <div style="text-align:center"> 
  <button onmouseover="playPause()">Play/Pause</button> 
  <br /> 
  <video id="video1" width="420">
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div>

<script type="text/javascript"> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
}
</script>

您可以在哪里看到我将代码从 onclick 更改为 onmouseover 的位置。我想我要问的是如何将触发器从按钮更改为视频本身。

【问题讨论】：

标签： dom video playback onmouseover

【解决方案1】：

   <html>
<head>
</head>
<body>
<div style="text-align:center" onmouseout="playPause()"> 
  <video id="video1" width="160">
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div>

<script type="text/javascript"> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
}
</script> 
</body>
</html>

【讨论】：