HTML网页视频播放器 - 带播放列表、本地文件支持、美化界面 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>视频播放器</title>
	<meta charset="utf-8">
	<style type="text/css">
		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 50px;
		}
		.video {
			width: 800px;
			height: 450px;
			background-color: #000;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.playlist {
			width: 800px;
			margin-top: 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.playlist-item {
			padding: 10px;
			margin: 10px;
			background-color: #333;
			color: #fff;
			border-radius: 5px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}
		.playlist-item:hover {
			background-color: #666;
		}
		.playlist-item.active {
			background-color: #00ff00;
		}
		.form {
			margin-top: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 800px;
		}
		.form input[type="text"] {
			padding: 10px;
			margin: 10px;
			border-radius: 5px;
			border: none;
			outline: none;
			font-size: 16px;
			width: 500px;
		}
		.form input[type="submit"] {
			padding: 10px;
			margin: 10px;
			border-radius: 5px;
			border: none;
			outline: none;
			font-size: 16px;
			background-color: #333;
			color: #fff;
			cursor: pointer;
			transition: background-color 0.3s ease;
			width: 100px;
		}
		.form input[type="submit"]:hover {
			background-color: #666;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="video">
			<video id="player" controls>
				<source id="video-src" src="" type="video/mp4">
			</video>
		</div>
		<div class="playlist">
			<!-- 播放列表项 -->
		</div>
		<div class="form">
			<form id="add-form">
				<input type="text" id="input-url" placeholder="输入视频链接或选择本地文件">
				<input type="submit" value="添加">
			</form>
		</div>
	</div>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
	// 获取元素
	const player = document.getElementById('player');
	const videoSrc = document.getElementById('video-src');
	const playlist = document.querySelector('.playlist');
	const addForm = document.getElementById('add-form');
	const inputUrl = document.getElementById('input-url');

	// 播放列表
	let videoList = [];

	// 添加视频
	addForm.addEventListener('submit', function(e) {
		e.preventDefault();
		const url = inputUrl.value.trim();
		if (url) {
			addVideo(url);
		}
	});

	// 添加视频到列表
	function addVideo(url) {
		videoList.push(url);
		renderPlaylist();
		inputUrl.value = '';
	}

	// 渲染播放列表
	function renderPlaylist() {
		playlist.innerHTML = '';
		videoList.forEach((url, index) =&gt; {
			const item = document.createElement('div');
			item.classList.add('playlist-item');
			item.innerText = url;
			if (index === 0) {
				item.classList.add('active');
				playVideo(url);
			}
			item.addEventListener('click', function() {
				playVideo(url);
				setActiveItem(this);
			});
			playlist.appendChild(item);
		});
	}

	// 播放视频
	function playVideo(url) {
		videoSrc.setAttribute('src', url);
		player.load();
		player.play();
	}

	// 设置当前播放项
	function setActiveItem(item) {
		const items = document.querySelectorAll('.playlist-item');
		items.forEach(item =&gt; {
			item.classList.remove('active');
		});
		item.classList.add('active');
	}

	// 初始化
	function init() {
		renderPlaylist();
	}

	init();
&lt;/script&gt;
</code></pre>
</body>
</html>