- 🔄 双播放器引擎:原生HTML5播放器 + ArtPlayer高级播放器,智能切换最佳播放方案
- 🎬 智能跳过功能:可配置的片头片尾自动跳过,告别重复内容,直达精彩部分
- ⚡ 自动连播:智能识别剧集,支持自动播放下一集,可自定义倒计时提醒
- 📍 断点续播:自动记录播放进度,随时随地继续观看
- 📹 多格式支持:完美支持 HLS (m3u8)、FLV、DASH (mpd)、MP4 等主流视频格式
- 🛡️ CSP绕过技术:智能绕过内容安全策略限制,大幅提升视频播放成功率
- 🔍 智能格式检测:自动识别视频格式并选择最佳播放策略
- 📱 响应式设计:完美适配桌面端、平板和移动设备
- 🌍 海量直播源:内置丰富的直播频道资源,包含4K频道、体育赛事、新闻资讯等
- 📋 智能分组管理:支持频道分类管理,快速定位想看的内容
- 🔧 多格式解析:支持 M3U8、M3U、TXT 等多种直播源格式
- 🎛️ 多倍速播放:支持 0.5x - 5x 多档位播放速度调节
- 🎨 现代化UI:基于 Arco Design 的精美界面设计
- 🔧 高度可配置:丰富的设置选项,满足不同用户需求
- 🚀 性能优化:基于 Vue 3 + Vite 的现代化架构,启动快速,运行流畅
- Vue 3 - 渐进式 JavaScript 框架
- Vite - 下一代前端构建工具
- Pinia - Vue 3 状态管理库
- Vue Router - 官方路由管理器
- Arco Design Vue - 企业级设计语言和组件库
- ECharts - 数据可视化图表库
- ArtPlayer - 现代化 HTML5 播放器
- HLS.js - HLS 流媒体播放支持
- FLV.js - FLV 格式播放支持
- Shaka Player - DASH 流媒体播放支持
- JavaScript - 现代化的 JavaScript 开发
- ESLint - 代码质量检查
- Prettier - 代码格式化工具
- Node.js >= 16.0.0
- pnpm >= 7.0.0 (推荐) 或 npm >= 8.0.0
# 使用 pnpm (推荐)
pnpm install
# 或使用 npm
npm install# 启动开发服务器
pnpm dev
# 或使用 npm
npm run dev访问 http://localhost:5173 即可看到应用运行效果。
# 构建生产版本
pnpm build
# 预览生产构建
pnpm preview- Fork 本项目到你的 GitHub
- 在 Vercel 中导入项目
- 自动部署完成
# 构建项目
pnpm build
# 将 dist 目录部署到 Nginx 服务器
# 配置 Nginx 支持 SPA 路由详细部署教程请参考:部署指南
- 在播放器中输入视频链接
- 选择播放器类型(默认播放器 或 ArtPlayer)
- 点击播放即可开始观看
- 点击播放器设置按钮
- 配置片头跳过时长(默认90秒)
- 配置片尾跳过时长(默认90秒)
- 保存设置后自动生效
- 点击直播选项卡
- 选择频道分组
- 点击频道即可开始观看直播
// 播放器选项配置
const playerOptions = {
hls: {
maxBufferLength: 600,
liveSyncDurationCount: 10,
},
flv: {
enableWorker: false,
enableStashBuffer: false,
autoCleanupSourceBuffer: true,
}
}// CSP绕过配置
export const CSP_BYPASS_CONFIG = {
enabled: true,
referrerPolicy: 'no-referrer',
autoBypass: true,
autoRetry: true
}我们欢迎所有形式的贡献!请查看 贡献指南 了解详细信息。
- Fork 本项目
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 创建 Pull Request
本项目基于 MIT 许可证开源 - 查看 LICENSE 文件了解详细信息。
- Vue.js - 渐进式 JavaScript 框架
- ArtPlayer - 现代化 HTML5 播放器
- Arco Design - 企业级设计语言
- Vite - 下一代前端构建工具
如果这个项目对你有帮助,请给它一个 ⭐️
Made with ❤️ by DrPlayer Team
以下是项目开发过程中的技术笔记和参考资料:
pnpm create vite
pnpm add primevue primeicons
pnpm add unplugin-vue-components
pnpm add @primevue/auto-import-resolver
pnpm add @primevue/themes
pnpm add primeflex
pnpm add vue-router
pnpm add pinia
pnpm remove primevue primeicons @primevue/auto-import-resolver primeflex @primevue/themes
pnpm add --save-dev @arco-design/web-vue
pnpm add json-server
pnpm add axios- package.json 需要注意:如果有
type:'module'需要删除 - json-server版本号只能
^0.17.4,不然不支持middleware
图标全选加购脚本:
var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) {
console.log(span[i].querySelector('span').click());
}