Question

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

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

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

1 个答案: