jQuery视频在线播放器

原创已于 2025-06-27 15:08:54 修改 · 305 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-09 16:37:25 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery视频在线播放器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 30px;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
}
.player-container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 30px;
}
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 比例 */
height: 0;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
}
.controls {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 10px 15px;
background-color: #2c3e50;
color: #fff;
}
.btn {
background: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
margin-right: 10px;
outline: none;
}
.progress-container {
flex: 1;
height: 10px;
background-color: #34495e;
border-radius: 5px;
margin: 0 10px;
cursor: pointer;
}
.progress-bar {
height: 100%;
background-color: #3498db;
border-radius: 5px;
width: 0%;
}
.time {
font-size: 14px;
margin: 0 10px;
}
.volume-container {
display: flex;
align-items: center;
margin-right: 10px;
}
.volume-slider {
width: 80px;
margin-left: 5px;
}
.fullscreen-btn {
margin-left: auto;
}
.video-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.video-item {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.3s;
}
.video-item:hover {
transform: translateY(-5px);
}
.video-thumbnail {
position: relative;
padding-bottom: 56.25%; /* 16:9 比例 */
height: 0;
overflow: hidden;
}
.video-thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-info {
padding: 10px;
}
.video-title {
font-weight: bold;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.video-duration {
font-size: 12px;
color: #7f8c8d;
}
footer {
text-align: center;
margin-top: 30px;
padding: 20px;
color: #7f8c8d;
font-size: 14px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.controls {
flex-direction: column;
align-items: stretch;
}
.progress-container {
margin: 10px 0;
order: 1;
}
.time {
order: 2;
margin: 5px 0;
}
.volume-container {
order: 3;
margin: 10px 0;
}
.fullscreen-btn {
order: 4;
margin-left: 0;
margin-top: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>jQuery视频在线播放器</h1>
<p>一个简单易用的HTML5视频播放器</p>

</header>

<div class="player-container">
<div class="video-container">
<video id="main-video">
<source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
您的浏览器不支持HTML5视频
</video>
</div>
<div class="controls">
<button class="btn play-btn" title="播放/暂停">▶</button>
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<span class="time current-time">00:00</span>
<span class="time">/</span>
<span class="time duration">00:00</span>
<div class="volume-container">
<button class="btn volume-btn" title="静音">🔊</button>
<input type="range" class="volume-slider" min="0" max="1" step="0.1" value="1">
</div>
<button class="btn fullscreen-btn" title="全屏">⛶</button>
</div>
</div>

<h2>视频列表</h2>
<div class="video-list">
<div class="video-item" data-video="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4">
<div class="video-thumbnail">
<img src="https://sample-videos.com/img/Sample-jpg-image-500kb.jpg" alt="视频缩略图">
</div>
<div class="video-info">
<div class="video-title">示例视频1 - 大雄兔</div>
<div class="video-duration">00:01:00</div>
</div>
</div>
<div class="video-item" data-video="https://sample-videos.com/video123/mp4/480/big_buck_bunny_480p_1mb.mp4">
<div class="video-thumbnail">
<img src="https://sample-videos.com/img/Sample-jpg-image-500kb.jpg" alt="视频缩略图">
</div>
<div class="video-info">
<div class="video-title">示例视频2 - 低分辨率版</div>
<div class="video-duration">00:01:00</div>
</div>
</div>
<div class="video-item" data-video="https://sample-videos.com/video123/mp4/360/big_buck_bunny_360p_1mb.mp4">
<div class="video-thumbnail">
<img src="https://sample-videos.com/img/Sample-jpg-image-500kb.jpg" alt="视频缩略图">
</div>
<div class="video-info">
<div class="video-title">示例视频3 - 移动版</div>
<div class="video-duration">00:01:00</div>
</div>
</div>
<div class="video-item" data-video="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_1mb.mp4">
<div class="video-thumbnail">
<img src="https://sample-videos.com/img/Sample-jpg-image-500kb.jpg" alt="视频缩略图">
</div>
<div class="video-info">
<div class="video-title">示例视频4 - 低带宽版</div>
<div class="video-duration">00:01:00</div>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 获取DOM元素
const video = $('#main-video')[0];
const playBtn = $('.play-btn');
const progressContainer = $('.progress-container');
const progressBar = $('.progress-bar');
const currentTimeEl = $('.current-time');
const durationEl = $('.duration');
const volumeBtn = $('.volume-btn');
const volumeSlider = $('.volume-slider');
const fullscreenBtn = $('.fullscreen-btn');
const videoItems = $('.video-item');

// 播放/暂停功能
function togglePlay() {
if (video.paused) {
video.play();
playBtn.text('❚❚');
} else {
video.pause();
playBtn.text('▶');
}
}

playBtn.on('click', togglePlay);
video.on('click', togglePlay);

// 更新进度条
function updateProgress() {
const percent = (video.currentTime / video.duration) * 100;
progressBar.css('width', `${percent}%`);
currentTimeEl.text(formatTime(video.currentTime));
}

video.on('timeupdate', updateProgress);

// 点击进度条跳转
function scrub(e) {
const scrubTime = (e.offsetX / progressContainer.width()) * video.duration;
video.currentTime = scrubTime;
}

progressContainer.on('click', scrub);

// 格式化时间显示
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
}

// 设置视频时长
function setDuration() {
durationEl.text(formatTime(video.duration));
}

video.on('loadedmetadata', setDuration);

// 音量控制
function updateVolume() {
video.volume = volumeSlider.val();
if (video.volume === 0) {
volumeBtn.text('🔇');
} else if (video.volume < 0.5) {
volumeBtn.text('🔉');
} else {
volumeBtn.text('🔊');
}
}

volumeSlider.on('input', updateVolume);

volumeBtn.on('click', function() {
if (video.volume > 0) {
video.volume = 0;
volumeSlider.val(0);
volumeBtn.text('🔇');
} else {
video.volume = 1;
volumeSlider.val(1);
volumeBtn.text('🔊');
}
});

// 全屏功能
fullscreenBtn.on('click', function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
});

// 视频列表点击切换
videoItems.on('click', function() {
const videoSrc = $(this).data('video');
video.src = videoSrc;
video.load();
video.play();
playBtn.text('❚❚');
});

// 键盘快捷键
$(document).on('keydown', function(e) {
switch(e.keyCode) {
case 32: // 空格键
e.preventDefault();
togglePlay();
break;
case 37: // 左箭头
video.currentTime -= 5;
break;
case 39: // 右箭头
video.currentTime += 5;
break;
case 38: // 上箭头
if (video.volume < 1) {
video.volume = Math.min(video.volume + 0.1, 1);
volumeSlider.val(video.volume);
updateVolume();
}
break;
case 40: // 下箭头
if (video.volume > 0) {
video.volume = Math.max(video.volume - 0.1, 0);
volumeSlider.val(video.volume);
updateVolume();
}
break;
case 70: // F键
if (video.requestFullscreen) {
video.requestFullscreen();
}
break;
}
});
});
</script>
</body>
</html>