HTML插入一个播放器,通过点击后播放
时间: 2024-03-06 09:48:29 浏览: 18
好的,以下是一个示例代码,可以实现点击按钮后在页面上插入一个视频播放器,并开始播放视频:
```
<!DOCTYPE html>
<html>
<head>
<title>Insert Video Player with Button Click</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#video-container {
display: none;
}
</style>
</head>
<body>
<button onclick="showVideo()">播放视频</button>
<div id="video-container">
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<script>
function showVideo() {
document.getElementById("video-container").style.display = "block";
document.getElementsByTagName("video")[0].play();
}
</script>
</body>
</html>
```
在这个示例中,我们首先在页面上放置了一个按钮,点击该按钮会触发`showVideo()`函数。该函数会将ID为`video-container`的div元素的`display`属性设置为`block`,从而显示视频播放器。然后通过`getElementsByTagName("video")[0]`获取页面上第一个video元素,并调用`play()`方法开始播放视频。
注意,这个示例只是一个简单的演示,实际中需要根据实际情况进行调整,比如视频的路径、尺寸、控制面板等。