我也想做个像cortb.cn的播放器，怎么做？

版主： nc007

回复
adsl
帖子： 2
注册时间： 2025年 8月 26日 12:22
联系：
联系 adsl

我也想做个像cortb.cn的播放器，怎么做？

帖子 由 adsl »

我也想做个像cortb.cn的播放器，怎么做？
页首
cnie
帖子： 15
注册时间： 2025年 8月 17日 12:49
联系：
联系 cnie

Re: 我也想做个像cortb.cn的播放器，怎么做？

帖子 由 cnie »

实现代码如下,复制了存成html文件就行:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>科技风视频播放器</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #0a0e1a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Arial', sans-serif;
color: #e0e0e0;
background-image:
radial-gradient(circle at 10% 20%, rgba(0, 80, 160, 0.1) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(0, 120, 255, 0.1) 0%, transparent 20%);
}

.container {
width: 100%;
max-width: 900px;
padding: 20px;
}

.player-container {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 25px rgba(0, 150, 255, 0.4);
transition: box-shadow 0.5s ease;
}

.player-container:hover {
box-shadow: 0 0 35px rgba(0, 200, 255, 0.6);
}

.player-title {
position: absolute;
top: 20px;
left: 20px;
color: #4af8ff;
text-shadow: 0 0 10px rgba(74, 248, 255, 0.7);
font-weight: 500;
letter-spacing: 1.5px;
font-size: 20px;
z-index: 10;
padding: 8px 16px;
background: rgba(5, 20, 40, 0.6);
border-radius: 6px;
border: 1px solid rgba(0, 150, 255, 0.4);
box-shadow: 0 0 15px rgba(0, 100, 200, 0.3);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
}

.player-title::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #4af8ff;
box-shadow: 0 0 8px #4af8ff;
margin-right: 10px;
animation: pulse 2s infinite;
}

.tech-border {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid rgba(0, 150, 255, 0.4);
border-radius: 12px;
pointer-events: none;
box-shadow: 0 0 15px rgba(0, 150, 255, 0.3);
}

.corner {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #4af8ff;
box-shadow: 0 0 10px rgba(74, 248, 255, 0.7);
}

.corner-tl {
top: 10px;
left: 10px;
border-right: none;
border-bottom: none;
border-radius: 8px 0 0 0;
}

.corner-tr {
top: 10px;
right: 10px;
border-left: none;
border-bottom: none;
border-radius: 0 8px 0 0;
}

.corner-bl {
bottom: 10px;
left: 10px;
border-right: none;
border-top: none;
border-radius: 0 0 0 8px;
}

.corner-br {
bottom: 10px;
right: 10px;
border-left: none;
border-top: none;
border-radius: 0 0 8px 0;
}

.glow-effect {
position: absolute;
width: 100%;
height: 30px;
bottom: 0;
left: 0;
background: linear-gradient(to top, rgba(0, 150, 255, 0.3), transparent);
pointer-events: none;
z-index: 5;
}

.video-player {
width: 100%;
display: block;
background: #000;
}

.controls {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to top, rgba(0, 20, 40, 0.9), transparent);
padding: 15px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10;
}

.player-container:hover .controls {
opacity: 1;
}

.left-controls, .right-controls {
display: flex;
align-items: center;
}

.play-pause {
background: rgba(0, 40, 80, 0.7);
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(0, 150, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 0 15px rgba(0, 150, 255, 0.4);
transition: all 0.3s ease;
}

.play-pause:hover {
box-shadow: 0 0 20px rgba(0, 200, 255, 0.8);
transform: scale(1.1);
}

.play-icon, .pause-icon {
color: #4af8ff;
font-size: 18px;
}

.progress-container {
flex-grow: 1;
height: 8px;
background: rgba(0, 40, 80, 0.6);
margin: 0 15px;
border-radius: 4px;
cursor: pointer;
position: relative;
overflow: hidden;
}

.progress-bar {
height: 100%;
background: linear-gradient(to right, #0077ff, #00ddff);
border-radius: 4px;
width: 0%;
transition: width 0.2s ease;
}

.time {
color: #8acfff;
font-size: 14px;
min-width: 100px;
text-shadow: 0 0 5px rgba(138, 207, 255, 0.5);
}

.volume-container {
display: flex;
align-items: center;
margin: 0 15px;
}

.volume-icon {
color: #8acfff;
margin-right: 10px;
font-size: 18px;
}

.volume-slider {
width: 80px;
height: 6px;
background: rgba(0, 40, 80, 0.6);
border-radius: 3px;
outline: none;
-webkit-appearance: none;
}

.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #4af8ff;
cursor: pointer;
box-shadow: 0 0 8px rgba(74, 248, 255, 0.8);
}

.control-btn {
background: rgba(0, 40, 80, 0.7);
width: 40px;
height: 40px;
border-radius: 8px;
border: 1px solid rgba(0, 150, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 150, 255, 0.3);
transition: all 0.3s ease;
margin-left: 10px;
}

.control-btn:hover {
box-shadow: 0 0 15px rgba(0, 200, 255, 0.6);
transform: scale(1.1);
}

.control-icon {
color: #4af8ff;
font-size: 18px;
}

.breathing-light {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: rgba(0, 100, 200, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 6;
animation: breathe 3s infinite;
}

.player-container.paused .breathing-light {
opacity: 1;
}

.breathing-light::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(0, 150, 255, 0.2);
animation: pulse 3s infinite;
}

.play-icon-large {
color: rgba(255, 255, 255, 0.9);
font-size: 36px;
z-index: 7;
text-shadow: 0 0 15px rgba(0, 200, 255, 0.9);
}

@keyframes breathe {
0% {
box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.7);
}
70% {
box-shadow: 0 0 0 20px rgba(0, 150, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 150, 255, 0);
}
}

@keyframes pulse {
0% {
transform: scale(0.8);
opacity: 0.7;
}
50% {
transform: scale(1.2);
opacity: 0.3;
}
100% {
transform: scale(0.8);
opacity: 0.7;
}
}

.quality-select {
background: rgba(0, 40, 80, 0.7);
color: #8acfff;
border: 1px solid rgba(0, 150, 255, 0.5);
border-radius: 6px;
padding: 6px 12px;
margin: 0 10px;
outline: none;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 150, 255, 0.2);
}

.quality-select option {
background: #0f1524;
}

.download-btn {
position: relative;
overflow: hidden;
}

.download-btn::after {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to bottom right,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0)
);
transform: rotate(30deg);
animation: shine 3s infinite;
}

@keyframes shine {
0% {
top: -50%;
left: -50%;
}
100% {
top: 100%;
left: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="player-container">
<video class="video-player">
<source src="https://test-videos.co.uk/vids/bigbuckb ... 0s_1MB.mp4" type="video/mp4">
您的浏览器不支持HTML5视频播放
</video>

<div class="player-title">科技未来播放器</div>

<div class="tech-border"></div>
<div class="corner corner-tl"></div>
<div class="corner corner-tr"></div>
<div class="corner corner-bl"></div>
<div class="corner corner-br"></div>
<div class="glow-effect"></div>

<div class="breathing-light">
<div class="play-icon-large">▶</div>
</div>

<div class="controls">
<div class="left-controls">
<div class="play-pause">
<div class="play-icon">▶</div>
<div class="pause-icon" style="display:none;">❚❚</div>
</div>

<div class="time">00:00 / 00:00</div>

<div class="progress-container">
<div class="progress-bar"></div>
</div>
</div>

<div class="right-controls">
<div class="volume-container">
<div class="volume-icon">🔊</div>
<input type="range" class="volume-slider" min="0" max="1" step="0.01" value="1">
</div>

<select class="quality-select">
<option value="auto">自动质量</option>
<option value="720">高清 (720p)</option>
<option value="480">标清 (480p)</option>
<option value="360">流畅 (360p)</option>
</select>

<div class="control-btn download-btn" title="下载视频">
<div class="control-icon">⭳</div>
</div>

<div class="control-btn fullscreen" title="全屏">
<div class="control-icon">⛶</div>
</div>
</div>
</div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取DOM元素
const video = document.querySelector('.video-player');
const playPauseBtn = document.querySelector('.play-pause');
const playIcon = document.querySelector('.play-icon');
const pauseIcon = document.querySelector('.pause-icon');
const currentTimeElement = document.querySelector('.time');
const progressContainer = document.querySelector('.progress-container');
const progressBar = document.querySelector('.progress-bar');
const volumeSlider = document.querySelector('.volume-slider');
const volumeIcon = document.querySelector('.volume-icon');
const fullscreenBtn = document.querySelector('.fullscreen');
const breathingLight = document.querySelector('.breathing-light');
const playerContainer = document.querySelector('.player-container');
const qualitySelect = document.querySelector('.quality-select');
const downloadBtn = document.querySelector('.download-btn');

// 播放/暂停功能
function togglePlay() {
if (video.paused) {
video.play();
playIcon.style.display = 'none';
pauseIcon.style.display = 'block';
playerContainer.classList.remove('paused');
} else {
video.pause();
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';
playerContainer.classList.add('paused');
}
}

// 更新进度条
function updateProgress() {
const percent = (video.currentTime / video.duration) * 100;
progressBar.style.width = `${percent}%`;

// 更新时间显示
const currentMinutes = Math.floor(video.currentTime / 60);
const currentSeconds = Math.floor(video.currentTime % 60);
const durationMinutes = Math.floor(video.duration / 60);
const durationSeconds = Math.floor(video.duration % 60);

currentTimeElement.textContent =
`${padZero(currentMinutes)}:${padZero(currentSeconds)} / ${padZero(durationMinutes)}:${padZero(durationSeconds)}`;
}

// 设置进度
function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = video.duration;
video.currentTime = (clickX / width) * duration;
}

// 设置音量
function setVolume() {
video.volume = volumeSlider.value;

// 更新音量图标
if (video.volume == 0) {
volumeIcon.textContent = '🔇';
} else if (video.volume < 0.5) {
volumeIcon.textContent = '🔈';
} else {
volumeIcon.textContent = '🔊';
}
}

// 切换全屏
function toggleFullscreen() {
if (!document.fullscreenElement) {
if (playerContainer.requestFullscreen) {
playerContainer.requestFullscreen();
} else if (playerContainer.webkitRequestFullscreen) {
playerContainer.webkitRequestFullscreen();
} else if (playerContainer.msRequestFullscreen) {
playerContainer.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}

// 下载视频功能
function downloadVideo() {
// 创建一个临时链接
const a = document.createElement('a');
a.href = video.src;
a.download = 'video.mp4';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

// 添加下载动画效果
downloadBtn.classList.add('downloading');
setTimeout(() => {
downloadBtn.classList.remove('downloading');
}, 1000);
}

// 辅助函数：补零
function padZero(num) {
return num.toString().padStart(2, '0');
}

// 事件监听
playPauseBtn.addEventListener('click', togglePlay);
breathingLight.addEventListener('click', togglePlay);

video.addEventListener('click', togglePlay);
video.addEventListener('timeupdate', updateProgress);
video.addEventListener('ended', () => {
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';
playerContainer.classList.add('paused');
});

progressContainer.addEventListener('click', setProgress);
volumeSlider.addEventListener('input', setVolume);
fullscreenBtn.addEventListener('click', toggleFullscreen);
downloadBtn.addEventListener('click', downloadVideo);

// 初始化音量
setVolume();

// 模拟质量选择功能
qualitySelect.addEventListener('change', function() {
// 在实际应用中，这里会切换视频源
console.log(`已选择质量: ${this.value}`);
});

// 添加键盘控制
document.addEventListener('keydown', function(e) {
if (document.activeElement.tagName === 'INPUT') return;

switch(e.key.toLowerCase()) {
case ' ':
case 'k':
togglePlay();
break;
case 'f':
toggleFullscreen();
break;
case 'm':
video.volume = video.volume > 0 ? 0 : 1;
volumeSlider.value = video.volume;
setVolume();
break;
case 'arrowleft':
video.currentTime = Math.max(0, video.currentTime - 5);
break;
case 'arrowright':
video.currentTime = Math.min(video.duration, video.currentTime + 5);
break;
case 'd':
downloadVideo();
break;
}
});

// 全屏变化事件
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);

function handleFullscreenChange() {
const fullscreenIcon = fullscreenBtn.querySelector('.control-icon');
if (document.fullscreenElement) {
fullscreenIcon.textContent = '⛶';
} else {
fullscreenIcon.textContent = '⛶';
}
}
});
</script>
</body>
</html>
页首
cnie
帖子： 15
注册时间： 2025年 8月 17日 12:49
联系：
联系 cnie

Re: 我也想做个像cortb.cn的播放器，怎么做？

帖子 由 cnie »

已调试，无错误. 修改代码中绿色的部分，那是mp4文件的地址。修改成自己的即可
页首
回复

回到 “软件发布,下载”

在线用户

正浏览此版面之用户： 没有注册用户 和 1 访客