Skip to content

Commit e9233b1

Browse files
author
Taois
committed
fix:代理播放功能优化&支持调试唤起外部播放器
1 parent c271aa0 commit e9233b1

File tree

7 files changed

+327
-8
lines changed

7 files changed

+327
-8
lines changed

‎dashboard/docs/mpv-protocol.reg‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
Windows Registry Editor Version 5.00
2+
3+
[HKEY_CLASSES_ROOT\mpv]
4+
@="URL:MPV Protocol"
5+
"URL Protocol"=""
6+
7+
[HKEY_CLASSES_ROOT\mpv\shell]
8+
9+
[HKEY_CLASSES_ROOT\mpv\shell\open]
10+
11+
[HKEY_CLASSES_ROOT\mpv\shell\open\command]
12+
@="\"C:\\Program Files\\mpv\\mpv.exe\" \"%1\""

‎dashboard/docs/vlc-protocol.reg‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
Windows Registry Editor Version 5.00
2+
3+
[HKEY_CLASSES_ROOT\vlc]
4+
@="URL:VLC Protocol"
5+
"URL Protocol"=""
6+
7+
[HKEY_CLASSES_ROOT\vlc\shell]
8+
9+
[HKEY_CLASSES_ROOT\vlc\shell\open]
10+
11+
[HKEY_CLASSES_ROOT\vlc\shell\open\command]
12+
@="\"C:\\Program Files\\VideoLAN\\VLC\\vlc.exe\" \"%1\""

‎dashboard/docs/外部播放器配置说明.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# 外部播放器配置说明
2+
3+
本文档说明如何配置VLC和MPV播放器以支持自定义协议唤起。
4+
5+
## 配置步骤
6+
7+
### 1. 修改注册表文件中的播放器路径
8+
9+
根据您的实际安装路径修改注册表文件：
10+
11+
#### vlc-protocol.reg
12+
```reg
13+
Windows Registry Editor Version 5.00
14+
15+
[HKEY_CLASSES_ROOT\vlc]
16+
@="URL:VLC Protocol"
17+
"URL Protocol"=""
18+
19+
[HKEY_CLASSES_ROOT\vlc\shell]
20+
21+
[HKEY_CLASSES_ROOT\vlc\shell\open]
22+
23+
[HKEY_CLASSES_ROOT\vlc\shell\open\command]
24+
@="\"C:\\Program Files\\VideoLAN\\VLC\\vlc.exe\" \"%1\""
25+
```
26+
27+
#### mpv-protocol.reg
28+
```reg
29+
Windows Registry Editor Version 5.00
30+
31+
[HKEY_CLASSES_ROOT\mpv]
32+
@="URL:MPV Protocol"
33+
"URL Protocol"=""
34+
35+
[HKEY_CLASSES_ROOT\mpv\shell]
36+
37+
[HKEY_CLASSES_ROOT\mpv\shell\open]
38+
39+
[HKEY_CLASSES_ROOT\mpv\shell\open\command]
40+
@="\"C:\\Program Files\\mpv\\mpv.exe\" \"%1\""
41+
```
42+
43+
**注意**: 请根据您的实际安装路径修改播放器的路径。常见路径：
44+
- VLC: `C:\Program Files\VideoLAN\VLC\vlc.exe`
45+
- MPV: `C:\Program Files\mpv\mpv.exe` 或 `C:\mpv\mpv.exe`
46+
47+
### 2. 注册协议
48+
49+
以管理员身份运行以下注册表文件：
50+
51+
1. 右键点击 `vlc-protocol.reg` → 选择"合并"
52+
2. 右键点击 `mpv-protocol.reg` → 选择"合并"
53+
54+
### 3. 测试配置
55+
56+
配置完成后，您可以在浏览器地址栏中测试：
57+
58+
- VLC: `vlc://https://example.com/video.mp4`
59+
- MPV: `mpv://https://example.com/video.mp4`
60+
61+
## 工作原理
62+
63+
当您点击"用VLC播放"或"用MPV播放"按钮时：
64+
65+
1. JavaScript代码构造 `vlc://` 或 `mpv://` 协议URL
66+
2. 浏览器识别自定义协议并查找注册表中的处理程序
67+
3. 系统调用对应的播放器，并将完整URL作为参数传递
68+
4. 播放器接收到URL参数（如 `vlc://https://example.com/video.mp4`）
69+
5. 播放器会自动处理协议前缀，提取真实的视频URL进行播放
70+
71+
## 常见问题
72+
73+
### Q: 如何确认配置是否成功？
74+
A: 在浏览器地址栏输入测试URL，如果能够成功调起对应的播放器，说明配置成功。
75+
76+
### Q: 播放器路径不正确怎么办？
77+
A: 请根据您的实际安装路径修改注册表文件中的播放器路径。
78+
79+
### Q: 为什么有时候播放器无法打开视频？
80+
A: 可能是因为：
81+
1. 视频URL需要特殊的请求头（如Referer）
82+
2. 视频格式不被播放器支持
83+
3. 网络连接问题
84+
85+
## 卸载协议
86+
87+
如果需要卸载协议，可以创建卸载的注册表文件：
88+
89+
```reg
90+
Windows Registry Editor Version 5.00
91+
92+
[-HKEY_CLASSES_ROOT\vlc]
93+
[-HKEY_CLASSES_ROOT\mpv]
94+
```
95+
96+
保存为 `.reg` 文件并以管理员身份运行即可删除协议注册。

‎dashboard/src/components/players/ArtVideoPlayer.vue‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
:headers="headers"
6262
:player-type="'artplayer'"
6363
:detected-format="detectedFormat"
64+
:proxy-url="proxyVideoUrl"
6465
@close="closeDebugDialog"
6566
/>
6667
</div>
@@ -154,6 +155,14 @@ const showDebugButton = computed(() => {
154155
return !!props.videoUrl
155156
})
156157
158+
// 计算属性：代理后的视频链接
159+
const proxyVideoUrl = computed(() => {
160+
if (!props.videoUrl) return ''
161+
162+
const headers = props.headers || {}
163+
return processVideoUrl(props.videoUrl, headers)
164+
})
165+
157166
// 选集弹窗相关数据已移除，现在使用ArtPlayer的layer功能
158167
159168
// 使用片头片尾设置组合式函数
@@ -625,9 +634,9 @@ const handleProxyChange = (proxyUrl) => {
625634
const savedAddresses = JSON.parse(localStorage.getItem('addressSettings') || '{}')
626635
627636
if (proxyUrl === 'disabled') {
628-
// 关闭代理播放
637+
// 关闭代理播放，但保留设置界面中配置的代理地址
629638
savedAddresses.proxyPlayEnabled = false
630-
savedAddresses.proxyPlay = ''
639+
// 注意：不清除 proxyPlay 地址，保留用户在设置界面的配置
631640
} else {
632641
// 启用代理播放并设置地址
633642
savedAddresses.proxyPlayEnabled = true

‎dashboard/src/components/players/DebugInfoDialog.vue‎

Lines changed: 181 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,54 @@
3535
</div>
3636
</div>
3737

38+
<!-- 代理后链接信息 -->
39+
<div v-if="proxyUrl && proxyUrl !== videoUrl" class="info-section">
40+
<div class="section-header">
41+
<h4>🔄 代理后链接</h4>
42+
<div class="section-actions">
43+
<button
44+
class="copy-btn"
45+
@click="copyToClipboard(proxyUrl, '代理后链接')"
46+
:disabled="!proxyUrl"
47+
>
48+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
49+
<rect x="9" y="9" width="13" height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
50+
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2"/>
51+
</svg>
52+
复制
53+
</button>
54+
<button
55+
class="external-player-btn vlc-btn"
56+
@click="openWithVLC(proxyUrl)"
57+
:disabled="!proxyUrl"
58+
title="使用VLC播放器打开"
59+
>
60+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
61+
<polygon points="5,3 19,12 5,21" fill="currentColor"/>
62+
</svg>
63+
VLC
64+
</button>
65+
<button
66+
class="external-player-btn mpv-btn"
67+
@click="openWithMPV(proxyUrl)"
68+
:disabled="!proxyUrl"
69+
title="使用MPV播放器打开"
70+
>
71+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
72+
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
73+
<polygon points="10,8 16,12 10,16" fill="currentColor"/>
74+
</svg>
75+
MPV
76+
</button>
77+
</div>
78+
</div>
79+
<div class="info-content">
80+
<div class="url-display proxy-url">
81+
{{ proxyUrl }}
82+
</div>
83+
</div>
84+
</div>
85+
3886
<!-- 请求头信息 -->
3987
<div class="info-section">
4088
<div class="section-header">
@@ -125,6 +173,10 @@ const props = defineProps({
125173
detectedFormat: {
126174
type: String,
127175
default: ''
176+
},
177+
proxyUrl: {
178+
type: String,
179+
default: ''
128180
}
129181
})
130182
@@ -169,6 +221,11 @@ const copyAllInfo = async () => {
169221
'📹 视频直链:',
170222
props.videoUrl || '暂无',
171223
'',
224+
...(props.proxyUrl && props.proxyUrl !== props.videoUrl ? [
225+
'🔄 代理后链接:',
226+
props.proxyUrl,
227+
''
228+
] : []),
172229
'📋 请求头信息:',
173230
headersText.value || '暂无',
174231
'',
@@ -183,6 +240,66 @@ const copyAllInfo = async () => {
183240
184241
await copyToClipboard(allInfo, '所有调试信息')
185242
}
243+
244+
// 使用VLC播放器打开视频
245+
const openWithVLC = (url) => {
246+
if (!url) {
247+
Message.warning('视频链接为空，无法调起VLC播放器')
248+
return
249+
}
250+
251+
try {
252+
// 使用vlc://协议，VLC会自动处理协议前缀
253+
const vlcUrl = `vlc://${url}`
254+
255+
// 创建隐藏的iframe来触发协议
256+
const iframe = document.createElement('iframe')
257+
iframe.style.display = 'none'
258+
iframe.src = vlcUrl
259+
document.body.appendChild(iframe)
260+
261+
// 短暂延迟后移除iframe
262+
setTimeout(() => {
263+
document.body.removeChild(iframe)
264+
}, 1000)
265+
266+
Message.success('正在尝试调起VLC播放器...')
267+
console.log('调起VLC播放器:', vlcUrl)
268+
} catch (error) {
269+
console.error('调起VLC播放器失败:', error)
270+
Message.error('调起VLC播放器失败，请确保已安装VLC播放器')
271+
}
272+
}
273+
274+
// 使用MPV播放器打开视频
275+
const openWithMPV = (url) => {
276+
if (!url) {
277+
Message.warning('视频链接为空，无法调起MPV播放器')
278+
return
279+
}
280+
281+
try {
282+
// 使用mpv://协议，MPV会自动处理协议前缀
283+
const mpvUrl = `mpv://${url}`
284+
285+
// 创建隐藏的iframe来触发协议
286+
const iframe = document.createElement('iframe')
287+
iframe.style.display = 'none'
288+
iframe.src = mpvUrl
289+
document.body.appendChild(iframe)
290+
291+
// 短暂延迟后移除iframe
292+
setTimeout(() => {
293+
document.body.removeChild(iframe)
294+
}, 1000)
295+
296+
Message.success('正在尝试调起MPV播放器...')
297+
console.log('调起MPV播放器:', mpvUrl)
298+
} catch (error) {
299+
console.error('调起MPV播放器失败:', error)
300+
Message.error('调起MPV播放器失败，请确保已安装MPV播放器')
301+
}
302+
}
186303
</script>
187304

188305
<style scoped>
@@ -269,6 +386,12 @@ const copyAllInfo = async () => {
269386
border-bottom: 1px solid #e9ecef;
270387
}
271388
389+
.section-actions {
390+
display: flex;
391+
align-items: center;
392+
gap: 8px;
393+
}
394+
272395
.section-header h4 {
273396
margin: 0;
274397
font-size: 14px;
@@ -320,6 +443,56 @@ const copyAllInfo = async () => {
320443
color: #495057;
321444
}
322445
446+
.proxy-url {
447+
background: #e8f5e8;
448+
border-color: #4caf50;
449+
color: #2e7d32;
450+
}
451+
452+
.external-player-btn {
453+
display: flex;
454+
align-items: center;
455+
gap: 4px;
456+
padding: 4px 8px;
457+
border: none;
458+
border-radius: 4px;
459+
cursor: pointer;
460+
font-size: 12px;
461+
font-weight: 500;
462+
transition: all 0.2s;
463+
}
464+
465+
.vlc-btn {
466+
background: #ff6b35;
467+
color: white;
468+
}
469+
470+
.vlc-btn:hover:not(:disabled) {
471+
background: #e55a2b;
472+
transform: translateY(-1px);
473+
}
474+
475+
.mpv-btn {
476+
background: #8e24aa;
477+
color: white;
478+
}
479+
480+
.mpv-btn:hover:not(:disabled) {
481+
background: #7b1fa2;
482+
transform: translateY(-1px);
483+
}
484+
485+
.external-player-btn:disabled {
486+
background: #6c757d;
487+
cursor: not-allowed;
488+
transform: none;
489+
}
490+
491+
.external-player-btn svg {
492+
width: 14px;
493+
height: 14px;
494+
}
495+
323496
.headers-display {
324497
background: #f8f9fa;
325498
border: 1px solid #e9ecef;
@@ -424,8 +597,15 @@ const copyAllInfo = async () => {
424597
gap: 8px;
425598
}
426599
427-
.copy-btn {
600+
.section-actions {
428601
align-self: flex-end;
602+
flex-wrap: wrap;
603+
}
604+
605+
.copy-btn,
606+
.external-player-btn {
607+
font-size: 11px;
608+
padding: 3px 6px;
429609
}
430610
431611
.url-display,

0 commit comments

Comments
 (0)