【漫步特效】MV音乐视频播放器之二 - 云荷-个人作品展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>论坛视频播放器</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
darkred: '#c8c108',
cyan: '#00FFFF',
gold: '#f0e7b5',
goldLight: '#FFF8DC',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.scrollbar-thin {
scrollbar-width: thin;
}
.scrollbar-thin::-webkit-scrollbar {
width: 5px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 9999px;
}
.player-controls {
opacity: 0;
transition: opacity 0.3s ease;
}
.video-container:hover .player-controls {
opacity: 1;
}
.playlist-item {
transition: all 0.2s ease;
}
.playlist-item:hover {
transform: translateX(5px);
}
.video-ratio {
aspect-ratio: 16/9;
}
}
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-7xl">
<div class="bg-darkred rounded-t-lg p-4 flex flex-col lg:flex-row gap-4 items-center justify-between">
<div class="text-xl font-bold mb-2 lg:mb-0">云端漫步经典MV视频播放器</div>
<div class="flex flex-wrap gap-4 w-full lg:w-auto">
<div class="flex items-center gap-2">
<label for="horizontal">水平:</label>
<input type="range" id="horizontal" min="0" max="100" value="50"
class="w-32 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
<span id="horizontal-value" class="w-10 text-center">50</span>
</div>
<div class="flex items-center gap-2">
<label for="width">宽度:</label>
<input type="range" id="width" min="640" max="1920" value="1280"
class="w-32 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
<span id="width-value" class="w-14 text-center">1280</span>
</div>
<div class="flex items-center gap-2">
<label for="height">高度:</label>
<input type="range" id="height" min="360" max="720" value="540"
class="w-32 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
<span id="height-value" class="w-14 text-center">540</span>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row gap-4 bg-gray-800 p-4 rounded-b-lg max-h-[800px]">
<div class="lg:w-3/4">
<div class="relative video-container" id="video-container">
<video id="main-video" class="w-full bg-black rounded-lg video-ratio" controls>
<p>HTML5视频播放。</p>
</video>
<div class="absolute inset-0 flex items-center justify-center player-controls">
<button id="play-pause-btn" class="bg-black/50 hover:bg-black/70 text-white w-16 h-16 rounded-full flex items-center justify-center transition-all duration-300 transform hover:scale-110">
<i class="fa fa-play text-2xl"></i>
</button>
</div>
<div class="absolute bottom-2 left-2 bg-black/70 text-white text-xs p-2 rounded opacity-70">
<div>左值: <span id="left-value">0</span></div>
<div>顶值: <span id="top-value">0</span></div>
</div>
</div>
<div class="mt-2 p-1.5 bg-gold rounded-lg text-gray-800 max-h-[60px] max-w-[80%] mx-auto overflow-y-auto">
<h2 id="video-title" class="text-xs font-bold mb-0.5 truncate">1斑MV</h2>
<p id="video-description" class="text-[10px]">
视频描述将显示在这里。
</p>
</div>
</div>
<div class="lg:w-1/4 bg-cyan/20 rounded-lg p-4 overflow-y-auto scrollbar-thin">
<h3 class="text-lg font-bold text-gray-900 mb-3">播放列表</h3>
<ul id="playlist" class="space-y-2">
<li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/973bd4f8915b191bf4dd3cc54c806f60.mp4">
1斑MV
</li>
<li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/090cdc6631620a9c77b3cfe074fd524f.mp4">
2Come As You Are
</li>
<li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/a27b255bed39bb5e2e5b509a75b09d6e.mp4">
3《智子》MV
</li>
<li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/a60bc75b847c929d74e520cb1b48b0bb.mp4">
4天高海阔
</li>
<li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/6733fca05e32ff313d8d4936df7ab263.mp4">
5那又怎样
</li>
<li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/36f94f9db7bef9af9a1ad62e8ee75635.mp4">
6河畔少年
</li>
<li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/cde984c03d561cfdfc20d5a2d3b76b8b.mp4">
7蛟龙出海
</li>
<li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/c7cef57863ef46c4c791706d29b56b84.mp4">
8相爱就是说了
</li>
<li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/7ee90978660f041a596d1fcb2b7bef82.mp4">
9清晨五点
</li>
<li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/ea8f5307f1b4150917fa7b32cdbebacc.mp4">
10带我去找夜生活
</li>
<li class="playlist-item bg-cyan/40 hover:bg-cyan/60 p-3 rounded-lg cursor-pointer text-gray-900" data-url="https://cccimg.com/view.php/4f03b71a14e785dbedad57543057c6e1.mp4">
11曹操
</li>
</ul>
</div>
</div>
</div>
<script>
// 获取DOM元素
const video = document.getElementById('main-video');
const playPauseBtn = document.getElementById('play-pause-btn');
const playlist = document.getElementById('playlist');
const videoTitle = document.getElementById('video-title');
const videoDescription = document.getElementById('video-description');
const horizontalSlider = document.getElementById('horizontal');
const horizontalValue = document.getElementById('horizontal-value');
const widthSlider = document.getElementById('width');
const widthValue = document.getElementById('width-value');
const heightSlider = document.getElementById('height');
const heightValue = document.getElementById('height-value');
const leftValue = document.getElementById('left-value');
const topValue = document.getElementById('top-value');
const videoContainer = document.getElementById('video-container');
const playlistContainer = playlist.parentElement;
// 设置初始视频
video.src = 'https://cccimg.com/view.php/973bd4f8915b191bf4dd3cc54c806f60.mp4';
videoTitle.textContent = '1斑MV';
// 播放/暂停功能
playPauseBtn.addEventListener('click', () => {
if (video.paused) {
video.play();
playPauseBtn.innerHTML = '<i class="fa fa-pause text-2xl"></i>';
} else {
video.pause();
playPauseBtn.innerHTML = '<i class="fa fa-play text-2xl"></i>';
}
});
// 视频播放状态变化时更新按钮
video.addEventListener('play', () => {
playPauseBtn.innerHTML = '<i class="fa fa-pause text-2xl"></i>';
});
video.addEventListener('pause', () => {
playPauseBtn.innerHTML = '<i class="fa fa-play text-2xl"></i>';
});
// 播放列表点击事件
playlist.querySelectorAll('li').forEach(item => {
item.addEventListener('click', () => {
// 移除所有选中状态
playlist.querySelectorAll('li').forEach(li => {
li.classList.remove('bg-cyan/80');
li.classList.add('bg-cyan/40');
});
// 添加选中状态
item.classList.remove('bg-cyan/40');
item.classList.add('bg-cyan/80');
// 更新视频
video.src = item.getAttribute('data-url');
videoTitle.textContent = item.textContent.trim();
videoDescription.textContent = `正在播放: ${item.textContent.trim()}`;
video.play();
});
});
// 水平滑块事件
horizontalSlider.addEventListener('input', () => {
horizontalValue.textContent = horizontalSlider.value;
videoContainer.style.transform = `translateX(${horizontalSlider.value - 50}px)`;
leftValue.textContent = horizontalSlider.value - 50;
});
// 宽度滑块事件
widthSlider.addEventListener('input', () => {
widthValue.textContent = widthSlider.value;
video.style.width = `${widthSlider.value}px`;
});
// 高度滑块事件 - 更新视频高度和播放列表高度
heightSlider.addEventListener('input', () => {
heightValue.textContent = heightSlider.value;
video.style.height = `${heightSlider.value}px`;
playlistContainer.style.maxHeight = `${heightSlider.value}px`;
});
// 鼠标移动时更新坐标
videoContainer.addEventListener('mousemove', (e) => {
const rect = videoContainer.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
leftValue.textContent = Math.round(x);
topValue.textContent = Math.round(y);
});
// 初始设置
videoContainer.style.transform = `translateX(${horizontalSlider.value - 50}px)`;
playlistContainer.style.maxHeight = `${heightSlider.value}px`;
</script>
</body>
</html>

复制代码