使用视频DOM暂停并播放.mp4onmouseover/ommouseout

我正在把一个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的位置。我想我要问的是如何将触发器从按钮更改为视频本身。

   <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>

相关内容

最新更新

热门标签：