前端实现video不播放
时间: 2024-04-22 16:26:06 浏览: 10
在前端中,如果你希望视频不自动播放,你可以`<video>`标签的`autoplay`属性来禁止自动播放,同时使用JavaScript来控制视频的播放。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>禁止自动播放视频</title>
</head>
<body>
<video id="myVideo" controls>
<source src="video.mp4" type="video/mp4">
</video>
<script>
var video = document.getElementById("myVideo");
video.autoplay = false; // 禁止自动播放
// 当用户点击播放按钮时才开始播放
video.addEventListener("click", function() {
if (video.paused) {
video.play();
} else {
video.pause();
}
});
</script>
</body>
</html>
```
在上面的示例中,我们将`autoplay`属性设置为`false`,这样视频就不会自动播放。然后,通过JavaScript监听视频的点击事件,当用户点击视频时,判断视频是否已暂停,如果已暂停,则开始播放,如果正在播放,则暂停。
这样就实现了视频不自动播放的效果。你可以将视频文件的路径替换为你自己的视频文件路径,并根据需要调整代码。