html插入视频,鼠标悬停播放的代码
时间: 2024-09-27 20:13:34 浏览: 31
HTML插入视频并实现鼠标悬停暂停播放通常使用`<video>`标签配合JavaScript。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.hover-play-video {
position: relative;
cursor: pointer;
}
.hover-play-video video {
display: none; /* 隐藏初始状态下的视频 */
}
</style>
</head>
<body>
<div class="hover-play-video">
<video id="myVideo" controls>
<source src="your_video.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
<img src="play_button.png" onmouseover="pauseVideo()" onmouseout="resumeVideo()">
</div>
<script>
function pauseVideo() {
var video = document.getElementById("myVideo");
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function resumeVideo() {
var video = document.getElementById("myVideo");
video.play();
}
</script>
</body>
</html>
```
在这个示例中,我们有一个视频元素`<video>`,它隐藏起来了。当鼠标悬停在图片上(也就是`<img>`标签),`onmouseover`事件触发`pauseVideo()`函数暂停视频;当鼠标离开,`onmouseout`事件触发`resumeVideo()`函数恢复播放。你需要替换`src`属性和`play_button.png`为你实际的视频源文件和暂停按钮图片。
阅读全文