539943419/miaoDirectory
1
0 Fork 0
Code Pull Requests Projects Releases 2 Activity

feat: 视频播放器字幕添加对ass, ssa格式字幕的支持。优化视频插件与文件夹插件的相关逻辑

Browse Source
This commit is contained in:
539943419 committed 2024-08-28 11:49:48 +08:00
1 parent f578072997
commit 3a48fd5643
3 files changed
+187 -50
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/miaoContextMenu.vue
+1 -2
View File
@@ -1,8 +1,7 @@
<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
<!-- 支持长按和右键呼出下拉菜单 -->
<template>
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave" @touchstart="handleTouchStart"
@touchend="handleTouchEnd">
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave">
<slot></slot>
</div>
<n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
src/views/miaoDirectory.vue
+3 -2
View File
@@ -322,7 +322,7 @@ const handleItemDragStart = async (
const items = uniq([item, ...selectedItem.value])
dataBus.set('dragData_vFiles', items.filter(v => v.type === 'file'))
dataBus.set('dragData_vDirectory', items.filter(v => v.type === 'directory'))
selectedItem.clear()
// selectedItem.clear()
}
const handleDropFiles = async (files: File[]) => {
@@ -606,4 +606,5 @@ $bottom-bar-height: 60px;
// position: absolute;
// }
// }
// }</style>
// }
</style>
src/views/miaoVideoPlayer.vue
+183 -46
View File
@@ -1,24 +1,23 @@
<template>
<miao-drop-handler @on-virtual-files="handleDropVFiles">
<div class="player-container">
<div ref="xgPlayer" id="xgplayer">
</div>
<div ref="xgPlayer" id="xgplayer"></div>
</div>
</miao-drop-handler>
</template>
<script lang="ts" setup>
import { VirtualFile } from '@/class/VirtualDirectory';
import miaoDropHandler from '@/components/miaoDropHandler.vue';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { VirtualFile } from '@/class/VirtualDirectory'
import miaoDropHandler from '@/components/miaoDropHandler.vue'
import { onBeforeUnmount, onMounted, ref } from 'vue'
// import useViretualPages from '@/hooks/useVirtualPages';
import XGPlayer from 'xgplayer'
import '@/style/xgplayer.scss'
import TextTrack from 'xgplayer/es/plugins/track'
import 'xgplayer/es/plugins/track/index.css'
import axios from 'axios';
import config from '@/config';
import axios from 'axios'
import { uniq } from 'lodash'
// import config from '@/config'
// const props = defineProps<{
// id: number
@@ -36,29 +35,55 @@ const xgPlayer = ref()
let _player: XGPlayer
const { setVideo } = (() => {
return {
setVideo: async (videoVFile: VirtualFile, vttVFiles?: VirtualFile[]) => {
_player && _player.destroy()
setVideo: async (
videoVFile: VirtualFile,
textTrackFiles?: VirtualFile[]
) => {
if(!currentFiles.value.includes(videoVFile)) {
currentFiles.value = [videoVFile]
}
videoVFile || (videoVFile = findVideo(currentFiles.value))
textTrackFiles &&
textTrackFiles.push(...findTextTrack(currentFiles.value))
textTrackFiles = uniq(textTrackFiles)
currentFiles.value = [videoVFile, ...(textTrackFiles ?? [])]
const _list = []
if (vttVFiles) {
for (let i of vttVFiles) {
if (textTrackFiles) {
for (let i of textTrackFiles) {
if (i.name.endsWith('srt')) {
const response = await axios.get(i.url)
console.log(srtToVtt(response.data))
// console.log(srtToVtt(response.data))
const url = setUrl(new Blob([srtToVtt(response.data)]))
_list.push({
id: i.name,
id: i.uid,
url,
language: 'zh-cn',
text: i.name,
default: i === vttVFiles[0]
// 这个language会覆盖id的设置，导致无法切换字幕
// language: 'zh-cn',
text: i.name
})
} else if (i.name.endsWith('ass')) {
const response = await axios.get(i.url)
// console.log(assToVtt(response.data))
const url = setUrl(new Blob([assToVtt(response.data)]))
_list.push({
id: i.uid,
url,
text: i.name
})
} else if (i.name.endsWith('ssa')) {
const response = await axios.get(i.url)
// console.log(ssaToVtt(response.data))
const url = setUrl(new Blob([ssaToVtt(response.data)]))
_list.push({
id: i.uid,
url,
text: i.name
})
} else {
_list.push({
id: i.name,
id: i.uid,
url: i.url,
language: 'zh-cn',
text: i.name,
default: i === vttVFiles[0]
text: i.name
})
}
}
@@ -66,6 +91,7 @@ const { setVideo } = (() => {
const texttrack = {
list: _list
}
_player && _player.destroy()
_player = new XGPlayer({
plugins: [TextTrack],
el: xgPlayer.value,
@@ -87,10 +113,9 @@ const { setVideo } = (() => {
lang: 'zh-cn',
playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
playNext: {
urlList: [
],
urlList: []
},
texttrack,
texttrack
})
}
}
@@ -114,67 +139,179 @@ const { setUrl, destroyUrl } = (() => {
const handleDropVFiles = (files: VirtualFile[]) => {
setVideo(findVideo(files), findTextTrack(files))
};
}
function srtToVtt(srt: string) {
// 将 SRT 字幕按行分割
const lines = srt.split('\n');
let vtt = 'WEBVTT\n\n'; // VTT 文件的开头
const lines = srt.split('\n')
let vtt = 'WEBVTT\n\n' // VTT 文件的开头
let index = 0;
let index = 0
while (index < lines.length) {
// 跳过空行
if (lines[index].trim() === '') {
index++;
continue;
index++
continue
}
// SRT 中的序号
const sequenceNumber = lines[index].trim();
index++;
lines[index].trim()
index++
// 时间戳
const timeLine = lines[index].trim().replace(/,/g, '.'); // 将逗号替换为点
index++;
const timeLine = lines[index].trim().replace(/,/g, '.') // 将逗号替换为点
index++
// 字幕文本
let text = '';
let text = ''
while (index < lines.length && lines[index].trim() !== '') {
text += lines[index].trim() + '\n';
index++;
text += lines[index].trim() + '\n'
index++
}
// 添加到 VTT 字幕中
vtt += `${timeLine}\n${text.trim()}\n\n`;
vtt += `${timeLine}\n${text.trim()}\n\n`
}
return vtt;
return vtt
}
function assToVtt(assContent: string) {
// 分割 ASS 内容为行
const lines = assContent.split('\n')
let vttContent = 'WEBVTT\n\n' // VTT 文件头
const findVideo = (vFiles: VirtualFile[]) => vFiles.filter(v => {
// 遍历每一行，寻找字幕条目
for (let line of lines) {
// 只处理 [Events] 部分后的 Dialogue 行
if (line.startsWith('Dialogue:')) {
// 提取时间戳和文本
const parts = line.split(',')
if (parts.length >= 5) {
// 将时间戳格式化为 VTT 格式
const startTime = parts[1]
.trim()
.replace('.', ',')
.replace(',', '.') // 替换 . 为 ,，然后再替换为 .
const endTime = parts[2]
.trim()
.replace('.', ',')
.replace(',', '.') // 替换 . 为 ,，然后再替换为 .
// 确保时间戳是两位数格式
const formattedStartTime = startTime.replace(
/(\d+):(\d+):(\d+)\.(\d+)/,
(match: any, h: any, m: any, s: any, ms: any) => {
match
return `${String(h).padStart(2, '0')}:${String(
m
).padStart(2, '0')}:${String(s).padStart(
2,
'0'
)}.${String(ms).padStart(3, '0')}`
}
)
const formattedEndTime = endTime.replace(
/(\d+):(\d+):(\d+)\.(\d+)/,
(match: any, h: any, m: any, s: any, ms: any) => {
match
return `${String(h).padStart(2, '0')}:${String(
m
).padStart(2, '0')}:${String(s).padStart(
2,
'0'
)}.${String(ms).padStart(3, '0')}`
}
)
const rawText = parts.slice(9).join(',').trim() // 提取文本
// 清理文本中的样式信息
const cleanText = rawText
.replace(/{[^}]*}/g, '')
.replace(/\\N/g, '\n')
.trim()
// 添加到 VTT 内容
vttContent += `${formattedStartTime} --> ${formattedEndTime}\n${cleanText}\n\n`
}
}
}
return vttContent.trim() // 返回 VTT 内容，去掉末尾空行
}
function ssaToVtt(ssaContent: string): string {
function convertSsaTimeToVtt(ssaTime: string): string {
const timeParts = ssaTime.split(':')
const hours = timeParts[0].padStart(2, '0')
const minutes = timeParts[1].padStart(2, '0')
const secondsAndMilliseconds = timeParts[2].split('.')
const seconds = secondsAndMilliseconds[0].padStart(2, '0')
const milliseconds = (secondsAndMilliseconds[1] || '0').padEnd(3, '0')
return `${hours}:${minutes}:${seconds}.${milliseconds}`
}
const lines = ssaContent.split('\n')
let vttContent = 'WEBVTT\n\n' // VTT文件头
let inEvents = false
for (const line of lines) {
// 检查是否进入[Events]部分
if (line.startsWith('[Events]')) {
inEvents = true
continue
}
// 如果在[Events]部分，处理对话行
if (inEvents && line.startsWith('Dialogue:')) {
const parts = line.split(',')
if (parts.length >= 3) {
const startTime = convertSsaTimeToVtt(parts[1].trim())
const endTime = convertSsaTimeToVtt(parts[2].trim())
const text = parts.slice(9).join(',').trim() // 获取字幕文本
// 去除样式标签
const cleanText = text.replace(/{[^}]*}/g, '').trim()
// 添加到VTT内容
vttContent += `${startTime} --> ${endTime}\n${cleanText}\n\n`
}
}
}
return vttContent
}
const findVideo = (vFiles: VirtualFile[]) =>
vFiles.filter((v) => {
for (let s of ['mp4', 'm3u8', 'hls']) {
if (v.name.endsWith(s)) {
return true
}
}
return false
})[0]
})[0]
const findTextTrack = (vFiles: VirtualFile[]) => vFiles.filter(v => {
for (let s of ['vtt', 'srt']) {
const findTextTrack = (vFiles: VirtualFile[]) =>
vFiles.filter((v) => {
for (let s of ['vtt', 'srt', 'ass', 'ssa']) {
if (v.name.endsWith(s)) {
return true
}
}
return false
})
})
onMounted(() => {
if (currentFiles.value.length) {
setVideo(findVideo(currentFiles.value), findTextTrack(currentFiles.value))
setVideo(
findVideo(currentFiles.value),
findTextTrack(currentFiles.value)
)
}
});
})
onBeforeUnmount(() => {
_player.destroy()