在这个示例中,我们将创建一个简单的HTML5视频列表,并使用JavaScript来控制视频的播放。这个示例将包括以下几个部分:
- 视频列表的HTML结构
- CSS样式以增强视觉效果
- JavaScript代码来控制视频的播放和暂停
1. 视频列表的HTML结构
首先,我们需要一个包含视频元素的列表。这里我们使用<video>标签来嵌入视频,并使用<ul>和<li>来创建一个列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频列表示例</title>
<style>
/* CSS样式将在下一部分介绍 */
</style>
</head>
<body>
<ul id="videoList">
<li><video controls>
<source src="video1.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video></li>
<li><video controls>
<source src="video2.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video></li>
<li><video controls>
<source src="video3.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video></li>
</ul>
<script>
// JavaScript代码将在下一部分介绍
</script>
</body>
</html>
2. CSS样式
接下来,我们添加一些CSS样式来增强列表的视觉效果。
#videoList {
list-style-type: none;
padding: 0;
}
#videoList li {
margin-bottom: 20px;
}
video {
width: 100%;
max-width: 600px;
}
3. JavaScript代码
最后,我们使用JavaScript来控制视频的播放和暂停。我们将为每个视频添加一个按钮,允许用户控制视频的播放。
document.addEventListener('DOMContentLoaded', function() {
var videos = document.querySelectorAll('video');
// 为每个视频添加播放和暂停按钮
videos.forEach(function(video) {
var playButton = document.createElement('button');
playButton.textContent = '播放';
playButton.onclick = function() {
if (video.paused) {
video.play();
playButton.textContent = '暂停';
} else {
video.pause();
playButton.textContent = '播放';
}
};
var pauseButton = document.createElement('button');
pauseButton.textContent = '暂停';
pauseButton.onclick = function() {
video.pause();
playButton.textContent = '播放';
};
var container = document.createElement('div');
container.appendChild(video);
container.appendChild(playButton);
container.appendChild(pauseButton);
video.parentNode.insertBefore(container, video);
});
});
这段代码首先等待文档加载完成,然后获取所有的视频元素。对于每个视频,我们创建两个按钮:一个用于播放,一个用于暂停。点击播放按钮将播放视频,并更新按钮文本为“暂停”。点击暂停按钮将暂停视频,并更新按钮文本为“播放”。
这样,我们就完成了一个简单的HTML5视频列表,并使用JavaScript来控制视频的播放和暂停。
