HTML5 video 标签属性、API 方法、事件、自定义样式详解与实用示例
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video 标签属性、API方法和事件示例</title>
<style>
#myVideo {
width: 500px;
height: auto;
}
.controls {
color: white;
background: rgba(0, 0, 0, 0.7);
padding: 10px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="controls">
<button onclick="playPause()">播放/暂停</button>
<input type="range" min="0" max="100" value="0" onchange="seekTo(this.value)">
<span>音量：<input type="range" min="0" max="100" value="100" onchange="setVolume(this.value)"></span>
</div>
<video id="myVideo" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
<script>
var myVideo = document.getElementById('myVideo');
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function seekTo(time) {
myVideo.currentTime = time / 100;
}
function setVolume(volume) {
myVideo.volume = volume / 100;
}
myVideo.addEventListener('play', function() {
console.log('视频开始播放');
});
myVideo.addEventListener('pause', function() {
console.log('视频暂停');
});
myVideo.addEventListener('timeupdate', function() {
console.log('当前播放时间: ' + myVideo.currentTime);
});
myVideo.addEventListener('ended', function() {
console.log('视频播放结束');
});
</script>
</body>
</html>这段代码展示了如何使用HTML5的video标签来嵌入视频内容，并通过JavaScript来控制播放、调整进度、调整音量，以及监听播放事件。同时，它提供了一个简单的用户界面，用于控制视频播放。这是一个入门级的示例，展示了基本的视频播放功能。
评论已关闭