DrPlayer - 新一代智能视频播放器

dr-player.vercel.app

一款功能强大、智能化的现代视频播放器，支持多格式播放、智能跳过、直播功能等特色功能

🚀 在线演示 | 📖 文档 |

✨ 核心特色

🎯 智能播放体验

• 🔄 双播放器引擎：原生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 - 官方路由管理器

UI 组件库

• 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

📦 部署指南

Vercel 部署 (推荐)

1. Fork 本项目到你的 GitHub
2. 在 Vercel 中导入项目
3. 自动部署完成

Nginx 部署

# 构建项目
pnpm build

# 将 dist 目录部署到 Nginx 服务器
# 配置 Nginx 支持 SPA 路由

详细部署教程请参考：部署指南

解决刷新404问题

参考：解决vercel项目刷新404问题

🎮 使用说明

基本播放

1. 在播放器中输入视频链接
2. 选择播放器类型（默认播放器 或 ArtPlayer）
3. 点击播放即可开始观看

智能跳过设置

1. 点击播放器设置按钮
2. 配置片头跳过时长（默认90秒）
3. 配置片尾跳过时长（默认90秒）
4. 保存设置后自动生效

直播功能

1. 点击直播选项卡
2. 选择频道分组
3. 点击频道即可开始观看直播

🔧 配置说明

播放器配置

// 播放器选项配置
const playerOptions = {
  hls: {
    maxBufferLength: 600,
    liveSyncDurationCount: 10,
  },
  flv: {
    enableWorker: false,
    enableStashBuffer: false,
    autoCleanupSourceBuffer: true,
  }
}

CSP 绕过配置

// CSP绕过配置
export const CSP_BYPASS_CONFIG = {
  enabled: true,
  referrerPolicy: 'no-referrer',
  autoBypass: true,
  autoRetry: true
}

🤝 贡献指南

我们欢迎所有形式的贡献！请查看 贡献指南 了解详细信息。

开发流程

1. Fork 本项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

📄 许可证

本项目基于 MIT 许可证开源 - 查看 LICENSE 文件了解详细信息。

🙏 致谢

• Vue.js - 渐进式 JavaScript 框架
• ArtPlayer - 现代化 HTML5 播放器
• Arco Design - 企业级设计语言
• Vite - 下一代前端构建工具

📞 联系我们

• 项目主页：https://drplayer.playdreamer.cn/
• 文档站点：https://hipy.playdreamer.cn/
• 问题反馈：GitHub Issues

---

如果这个项目对你有帮助，请给它一个 ⭐️

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

技术参考

• Vue 3 组合式 API 指南
• Arco Design Vue 组件库

注意事项

• 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());
}

部署相关

• 部署教程
• 解决vercel项目刷新404问题

演示地址

• 主站：https://drplayer.playdreamer.cn/
• 文档：https://hipy.playdreamer.cn/

from   https://github.com/hjdhnx/DrPlayer

( https://github.com/hjdhnx/DrPlayer/releases/download/V1.0.1/drplayer-server-win.exe)

 ---------

配合drplayer实现全平台浏览器观影

drpy-node-mauve.vercel.app

 https://drpy-node-mauve.vercel.app/docs/pupInstall.md

常用超链接

• 本项目主页-免翻
• 最新DS本地包-适配皮卡丘
• DS本地包下载中心
• 接口文档 | 接口列表如定时任务 | 小猫影视-待对接T4
• 代码质量评估工具说明 | DS项目代码评估报告
• 本地配置接口-动态本地
• 本地配置接口-动态外网/局域网
• 其他配置接口-订阅过滤
• python环境 | DS项目环境变量说明
• php环境(详见 spider/php/readme.md) 不在这里赘述
• 猫源调试教程
• 接口压测教程
• AI编程工具 trae | 邮编ZIP输入: 518000
• 推荐使用AI模型-GLM4.7 | GLM配置文档
• 免费AI-360纳米|免费AI-当贝AI|国外聚合全模型
• 本站防止爬虫协议
• 油猴脚本-反切屏检测
• 油猴脚本-通用网页脚本框架
• 油猴脚本-通用网页脚本框架自定义指令集

---

插件应用列表

• DrPlayer
• Websocket实时日志
• cookie管理插件
• cron表达式插件
• 剪切板智能推送插件
• DS源可用性检测插件
• DS解析检测插件
• DS源配置编辑插件
• DS内存图片管理器插件
• DS时钟插件-白色时钟|日历时钟
• DS庆祝页面-完结撒花
• bookReader
• 系统备份与恢复
• 代码加解密工具
• 央视点播解析工具
• 在线猫ds源主页
• V我50支付凭证生成器

同作者项目

• DS源适配猫影视
• DS插件项目-golang
• DS 二进制插件项目-pup-sniffer
• DS 二进制插件项目-file-index
• DS web插件项目-drplayer
• drpy2打包项目

免费壳子推荐

• 酷9
• 千寻
• 皮卡丘

 

注意事项

总是有人遇到各种奇葩问题，像什么没弹幕，访问/config/1服务马上崩溃等等，能自行解决最好，解决不了我建议你使用下方安装教程 3.道长腾讯轻量云服务器安装方案 跟我一样还有问题那就不可能了，我能用你即能用

基础框架

todo:

1. js里的源能否去除export开头，保持跟qjs一致
2. js里的源，像一级这种异步js，里面调用未定义的函数，能否不通过函数参数传入直接注入调用
3. 在源的各个函数调用的时候动态注入input、MY_URL等局部变量不影响全局。搞了半天没成功，有点难受，待解决

写源的函数不可以使用箭头函数，箭头函数无法拿到this作用域就没法获取input和MY_URL变量

精简去除的库:

1. axios(这个去不掉，刚需，后端请求才能拿到set-cookie)
2. jsonpath
3. underscore
4. pino-pretty
5. deasync

参考资料

• crypto-js-wasm使用教程
• webdav使用教程
• puppeteer使用教程
• drpyS源属性说明
• drpy2写源简述
• 关姐算法搭建说明

问题说明

1. windows上直接运行index.js可能会发现运行过程中的日志打印出中文乱码。建议通过yarn dev运行或者在package.json里点击dev脚本运行
2. pinyin 库依赖的 nodejieba 跑路了现在无法完成安装
3. new Promise 里发生的错误无法被外部try catch 导致程序崩溃，如 番薯动漫.js 里的写法

安装说明

1.zy安装方案

• 多平台安装教程

2.自动化安装方案（直接薅道长羊毛）

• 终端执行

bash -c "$(curl -fsSLk https://git-proxy.playdreamer.cn/hjdhnx/drpy-node/raw/refs/heads/main/install/autorun.sh)"

• 添加定时方案

echo "30 7 * * * cd /patch && bash -c \"\$(curl -fsSLk https://git-proxy.playdreamer.cn/hjdhnx/drpy-node/raw/refs/heads/main/install/autorun.sh)\" >> /patch/drpyslog.log 2>&1" | crontab -

或者下载脚本到本地后

chmod a+x /path/autorun.sh

echo "30 7 * * * bash /path/autorun.sh >> /path/logfile.log 2>&1" | crontab -

命令说明 /patch 为脚本存放路径（脚本放在与源码同级的自定义目录中）

3.道长腾讯轻量云服务器安装方案

mkdir /home/node_work
cd /home/node_work
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
source ~/.bashrc
nvm install 22
npm config set registry https://registry.npmmirror.com
npm i -g cnpm --registry=https://registry.npmmirror.com
npm i -g pm2 yarn@1.22.19
git clone https://git-proxy.playdreamer.cn/hjdhnx/drpy-node.git
cd drpy-node
yarn
yarn pm2
pm2 logs drpys
pm2 ls
pm2 stop drpys
pm2 start drpys
pm2 restart drpys

代理转发功能测试

• 代理转发ds
• 代理转发百度
• 代理转发范冰冰直播源

友链(白嫖接口服务)

• 猫影视git文件加速
• 猫影视多功能主页
• ZY写源教学
• 源动力-新
• 源动力-老
• 电竞专业反应测试
• 桌面启动器
• 不知名获取网盘CK工具

AI接入

• 讯飞星火
• deepseek | 对话
• 讯飞智能体 | 对话 | 数据集
• KIMI | 对话

from  https://github.com/hjdhnx/drpy-node

( https://zy.catni.cn/otherShare/drpyS-build.html)