x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-24 06:31:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

优化字幕切换

Browse Source
This commit is contained in:
zhw2590582 committed 2019-10-01 20:36:43 +08:00
1 parent 31d1949da0
commit d43a71b931
4 files changed
+127 -102
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/subtitle.js
+59 -47
View File
@@ -1,4 +1,4 @@
import { setStyles, srtToVtt, vttToBlob, getExt } from './utils';
import { setStyles, srtToVtt, vttToBlob, getExt, errorHandle } from './utils';
import assToVtt from './utils/assToVtt';
export default class Subtitle {
@@ -20,57 +20,65 @@ export default class Subtitle {
return '';
}
set url(url) {
this.init(url);
switch(url) {
const { i18n, notice } = this.art;
return this.init(url).then(blobUrl => {
notice.show(i18n.get('Switch subtitle'));
return blobUrl;
});
}
init(url) {
const {
events: { proxy },
option: { subtitle },
template: { $video, $subtitle, $track },
} = this.art;
return new Promise(resolve => {
const {
events: { proxy },
option: { subtitle },
template: { $video, $subtitle, $track },
} = this.art;
setStyles($subtitle, subtitle.style || {});
setStyles($subtitle, subtitle.style || {});
if (!$track) {
const $newTrack = document.createElement('track');
$newTrack.default = true;
$newTrack.kind = 'metadata';
$video.appendChild($newTrack);
this.art.template.$track = $newTrack;
}
this.load(url).then(url => {
$subtitle.innerHTML = '';
const lastUrl = this.art.template.$track.src;
if (lastUrl === url) return;
URL.revokeObjectURL(lastUrl);
this.art.template.$track.src = url;
this.art.emit('subtitle:load', url);
if ($video.textTracks && $video.textTracks[0]) {
const [track] = $video.textTracks;
// eslint-disable-next-line no-inner-declarations
function updateSubtitle() {
const [cue] = track.activeCues;
$subtitle.innerHTML = '';
if (cue) {
$subtitle.innerHTML = cue.text
.split(/\r?\n/)
.map(item => `<p>${item}</p>`)
.join('');
}
this.art.emit('subtitle:update', $subtitle);
}
if (!this.isInit) {
this.isInit = true;
proxy(track, 'cuechange', updateSubtitle.bind(this));
}
this.art.on('artplayerPluginSubtitle:set', updateSubtitle.bind(this));
if (!$track) {
const $newTrack = document.createElement('track');
$newTrack.default = true;
$newTrack.kind = 'metadata';
$video.appendChild($newTrack);
this.art.template.$track = $newTrack;
}
this.load(url).then(blobUrl => {
$subtitle.innerHTML = '';
const { $track } = this.art.template;
const lastUrl = $track.src;
if (lastUrl === blobUrl) return;
URL.revokeObjectURL(lastUrl);
$track.src = blobUrl;
if ($video.textTracks && $video.textTracks[0]) {
const [track] = $video.textTracks;
// eslint-disable-next-line no-inner-declarations
function updateSubtitle() {
const [cue] = track.activeCues;
$subtitle.innerHTML = '';
if (cue) {
$subtitle.innerHTML = cue.text
.split(/\r?\n/)
.map(item => `<p>${item}</p>`)
.join('');
}
this.art.emit('subtitle:update', $subtitle);
}
if (!this.isInit) {
this.isInit = true;
proxy(track, 'cuechange', updateSubtitle.bind(this));
}
this.art.on('artplayerPluginSubtitleOffset', updateSubtitle.bind(this));
}
resolve(blobUrl);
});
});
}
@@ -82,14 +90,18 @@ export default class Subtitle {
})
.then(text => {
const type = getExt(url);
errorHandle(['srt', 'ass', 'vtt'].includes(type), `Unsupported subtitle format: ${type}`);
const formatText = text.replace(/{[\s\S]*?}/g, '');
if (type === 'srt') {
return vttToBlob(srtToVtt(formatText));
}
if (type === 'ass') {
return vttToBlob(assToVtt(formatText));
}
return url;
return vttToBlob(formatText);
})
.catch(err => {
notice.show(err);