<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频播放</title>
<style>
.video-container {
width: 600px;
margin: 0 auto;
}
video {
width: 100%;
}
.controls {
text-align: center;
margin-top: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div>
<video id="myVideo" poster="your-video-poster.jpg">
<source src="https://www.tianjiandao.com/uploadfile/ueditor/file/202505/1746762107d4d3b5.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频。
</video>
<div>
<button id="playButton">开始播放</button>
</div>
</div>
<script>
const video = document.getElementById('myVideo');
const playButton = document.getElementById('playButton');
playButton.addEventListener('click', function() {
video.play().catch(e => console.log('浏览器不允许自动播放', e));
});
video.addEventListener('ended', function() {
console.log('视频播放结束');
});
</script>
</body>
</html>