📌  相关文章
📜  如何使用 javascript 在 html5 中添加多个视频(1)

📅  最后修改于: 2023-12-03 15:23:52.833000             🧑  作者: Mango

如何使用 JavaScript 在 HTML5 中添加多个视频

在 HTML5 中，使用 <video> 标签可以很方便地添加视频。但是，如果需要添加多个视频，手动在 HTML 中添加标签可能会变得很繁琐。使用 JavaScript，我们可以通过循环自动添加多个视频。

1. 创建 HTML 结构

首先，我们需要创建一个容器用于放置多个视频。这里我们创建一个 <div> 元素，并设置一个 ID。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>多个视频示例</title>
</head>
<body>
	<div id="videos"></div>
</body>
</html>
2. 添加视频数据

接下来，我们需要添加多个视频的数据（例如视频链接、封面、标题等）。这里我们使用数组来存储这些数据。每个视频数据都是一个对象，包含视频链接（src）、封面（poster）和标题（title）。

var videosData = [
	{
		src: "video1.mp4",
		poster: "video1.jpg",
		title: "视频 1"
	},
	{
		src: "video2.mp4",
		poster: "video2.jpg",
		title: "视频 2"
	},
	{
		src: "video3.mp4",
		poster: "video3.jpg",
		title: "视频 3"
	}
];
3. 使用 JavaScript 自动添加视频

现在我们可以使用 JavaScript 循环遍历视频数据，并创建多个 <video> 标签。在创建标签时，我们需要设置 src、poster 和 title 属性。然后，将这些标签添加到容器中。

var videosContainer = document.getElementById("videos");

for (var i = 0; i < videosData.length; i++) {
	var videoData = videosData[i];

	var video = document.createElement("video");
	video.src = videoData.src;
	video.poster = videoData.poster;
	video.title = videoData.title;
	video.controls = true;

	videosContainer.appendChild(video);
}

这段代码会在 videos 容器内创建多个带有控制条的视频播放器。你可以根据需要自定义播放器的样式和控件。

4. 完整代码

下面是完整的 HTML 和 JavaScript 代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>多个视频示例</title>
</head>
<body>
	<div id="videos"></div>

	<script>
		var videosData = [
			{
				src: "video1.mp4",
				poster: "video1.jpg",
				title: "视频 1"
			},
			{
				src: "video2.mp4",
				poster: "video2.jpg",
				title: "视频 2"
			},
			{
				src: "video3.mp4",
				poster: "video3.jpg",
				title: "视频 3"
			}
		];

		var videosContainer = document.getElementById("videos");

		for (var i = 0; i < videosData.length; i++) {
			var videoData = videosData[i];

			var video = document.createElement("video");
			video.src = videoData.src;
			video.poster = videoData.poster;
			video.title = videoData.title;
			video.controls = true;

			videosContainer.appendChild(video);
		}
	</script>
</body>
</html>