refactor(useVideoPlayer): 添加注释并重新组织视频播放器逻辑
为视频播放器逻辑添加清晰的注释标记 重新组织代码结构使其更易读
Showing
1 changed file
with
6 additions
and
1 deletions
| ... | @@ -44,11 +44,13 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) { | ... | @@ -44,11 +44,13 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) { |
| 44 | return (props.videoUrl || "").trim(); | 44 | return (props.videoUrl || "").trim(); |
| 45 | }); | 45 | }); |
| 46 | 46 | ||
| 47 | + // 3. HLS 支持判断 | ||
| 47 | const isM3U8 = computed(() => { | 48 | const isM3U8 = computed(() => { |
| 48 | const url = videoUrlValue.value.toLowerCase(); | 49 | const url = videoUrlValue.value.toLowerCase(); |
| 49 | return url.includes('.m3u8'); | 50 | return url.includes('.m3u8'); |
| 50 | }); | 51 | }); |
| 51 | 52 | ||
| 53 | + // 4. 视频类型判断 | ||
| 52 | const getVideoMimeType = (url) => { | 54 | const getVideoMimeType = (url) => { |
| 53 | const urlText = (url || "").toLowerCase(); | 55 | const urlText = (url || "").toLowerCase(); |
| 54 | if (urlText.includes(".m3u8")) return "application/x-mpegURL"; | 56 | if (urlText.includes(".m3u8")) return "application/x-mpegURL"; |
| ... | @@ -57,6 +59,7 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) { | ... | @@ -57,6 +59,7 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) { |
| 57 | return ""; | 59 | return ""; |
| 58 | }; | 60 | }; |
| 59 | 61 | ||
| 62 | + // 5. 视频源配置 | ||
| 60 | const videoSources = computed(() => { | 63 | const videoSources = computed(() => { |
| 61 | const type = getVideoMimeType(videoUrlValue.value); | 64 | const type = getVideoMimeType(videoUrlValue.value); |
| 62 | if (type) { | 65 | if (type) { |
| ... | @@ -65,7 +68,7 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) { | ... | @@ -65,7 +68,7 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) { |
| 65 | return [{ src: videoUrlValue.value }]; | 68 | return [{ src: videoUrlValue.value }]; |
| 66 | }); | 69 | }); |
| 67 | 70 | ||
| 68 | - // 3. 错误处理逻辑 | 71 | + // 6. 错误处理逻辑 |
| 69 | const formatBytes = (bytes) => { | 72 | const formatBytes = (bytes) => { |
| 70 | const size = Number(bytes) || 0; | 73 | const size = Number(bytes) || 0; |
| 71 | if (!size) return ""; | 74 | if (!size) return ""; |
| ... | @@ -156,6 +159,7 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) { | ... | @@ -156,6 +159,7 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) { |
| 156 | } | 159 | } |
| 157 | }; | 160 | }; |
| 158 | 161 | ||
| 162 | + // 7. 错误处理逻辑 | ||
| 159 | const handleError = (code, message = '') => { | 163 | const handleError = (code, message = '') => { |
| 160 | showErrorOverlay.value = true; | 164 | showErrorOverlay.value = true; |
| 161 | switch (code) { | 165 | switch (code) { |
| ... | @@ -281,6 +285,7 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) { | ... | @@ -281,6 +285,7 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) { |
| 281 | ...props.options, | 285 | ...props.options, |
| 282 | })); | 286 | })); |
| 283 | 287 | ||
| 288 | + // 8. Video.js 挂载处理 | ||
| 284 | const handleVideoJsMounted = (payload) => { | 289 | const handleVideoJsMounted = (payload) => { |
| 285 | state.value = payload.state; | 290 | state.value = payload.state; |
| 286 | player.value = payload.player; | 291 | player.value = payload.player; | ... | ... |
-
Please register or login to post a comment