mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-24 06:31:20 -08:00
修改本地预览插件
This commit is contained in:
1 parent
7c5d0f7385
commit
042745f001
15 files changed
+296
-129
No files matched your search
@@ -7,10 +7,10 @@ export default function autoPip(art) {
|
||||
const { top, height } = template.$player.getBoundingClientRect();
|
||||
if (top + height <= 0 && !player.pip) {
|
||||
player.pip = true;
|
||||
art.emit('artplayerPluginAutoPip', true);
|
||||
art.emit('autoPip', true);
|
||||
} else if (player.pip) {
|
||||
player.pip = false;
|
||||
art.emit('artplayerPluginAutoPip', false);
|
||||
art.emit('autoPip', false);
|
||||
}
|
||||
}, 300);
|
||||
|
||||
|
||||
@@ -1,11 +1,22 @@
|
||||
import { append, setStyle, setStyles, errorHandle, getExt, vttToBlob, srtToVtt, assToVtt } from '../utils';
|
||||
import { query, append, setStyle, setStyles, errorHandle, getExt, vttToBlob, srtToVtt, assToVtt } from '../utils';
|
||||
|
||||
export default function localSubtitle(art) {
|
||||
const {
|
||||
events: { proxy },
|
||||
subtitle,
|
||||
setting,
|
||||
i18n,
|
||||
} = art;
|
||||
|
||||
i18n.update({
|
||||
'zh-cn': {
|
||||
'Local Subtitle': '本地字幕',
|
||||
},
|
||||
'zh-tw': {
|
||||
'Local Subtitle': '本地字幕',
|
||||
},
|
||||
});
|
||||
|
||||
function loadSubtitle(file) {
|
||||
if (file) {
|
||||
const type = getExt(file.name);
|
||||
@@ -32,6 +43,7 @@ export default function localSubtitle(art) {
|
||||
default:
|
||||
break;
|
||||
}
|
||||
art.emit('localSubtitle', file);
|
||||
});
|
||||
reader.readAsText(file);
|
||||
} else {
|
||||
@@ -40,23 +52,51 @@ export default function localSubtitle(art) {
|
||||
}
|
||||
}
|
||||
|
||||
function attach(target) {
|
||||
const $input = append(target, '<input type="file">');
|
||||
setStyle(target, 'position', 'relative');
|
||||
setStyles($input, {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
left: '0',
|
||||
top: '0',
|
||||
opacity: '0',
|
||||
});
|
||||
proxy($input, 'change', () => {
|
||||
const file = $input.files[0];
|
||||
loadSubtitle(file);
|
||||
});
|
||||
}
|
||||
|
||||
art.on('ready', () => {
|
||||
setting.add({
|
||||
title: 'Local Subtitle',
|
||||
name: 'localSubtitle',
|
||||
index: 40,
|
||||
html: `
|
||||
<div class="art-setting-header">
|
||||
${i18n.get('Local Subtitle')}
|
||||
</div>
|
||||
<div class="art-setting-upload">
|
||||
<div class="art-upload-btn">${i18n.get('Open')}</div>
|
||||
<div class="art-upload-value"></div>
|
||||
</div>
|
||||
`,
|
||||
mounted: $setting => {
|
||||
const $btn = query('.art-upload-btn', $setting);
|
||||
const $value = query('.art-upload-value', $setting);
|
||||
art.on('localSubtitle', file => {
|
||||
$value.textContent = file.name;
|
||||
$value.title = file.name;
|
||||
});
|
||||
attach($btn);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
name: 'localSubtitle',
|
||||
attach(target) {
|
||||
const $input = append(target, '<input type="file">');
|
||||
setStyle(target, 'position', 'relative');
|
||||
setStyles($input, {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
left: '0',
|
||||
top: '0',
|
||||
opacity: '0',
|
||||
});
|
||||
proxy($input, 'change', () => {
|
||||
const file = $input.files[0];
|
||||
loadSubtitle(file);
|
||||
});
|
||||
},
|
||||
attach,
|
||||
};
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { append, setStyle, setStyles, errorHandle } from '../utils';
|
||||
import { append, query, setStyle, setStyles, errorHandle } from '../utils';
|
||||
|
||||
export default function localVideo(art) {
|
||||
const {
|
||||
@@ -6,8 +6,19 @@ export default function localVideo(art) {
|
||||
template,
|
||||
player,
|
||||
option,
|
||||
setting,
|
||||
i18n,
|
||||
} = art;
|
||||
|
||||
i18n.update({
|
||||
'zh-cn': {
|
||||
'Local Video': '本地视频',
|
||||
},
|
||||
'zh-tw': {
|
||||
'Local Video': '本地視頻',
|
||||
},
|
||||
});
|
||||
|
||||
function loadVideo(file) {
|
||||
if (file) {
|
||||
const canPlayType = template.$video.canPlayType(file.type);
|
||||
@@ -15,6 +26,7 @@ export default function localVideo(art) {
|
||||
const url = URL.createObjectURL(file);
|
||||
option.title = file.name;
|
||||
player.switchUrl(url, file.name);
|
||||
art.emit('localVideo', file);
|
||||
} else {
|
||||
errorHandle(false, 'Playback of this file format is not supported');
|
||||
}
|
||||
@@ -31,23 +43,51 @@ export default function localVideo(art) {
|
||||
loadVideo(file);
|
||||
});
|
||||
|
||||
function attach(target) {
|
||||
const $input = append(target, '<input type="file">');
|
||||
setStyle(target, 'position', 'relative');
|
||||
setStyles($input, {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
left: '0',
|
||||
top: '0',
|
||||
opacity: '0',
|
||||
});
|
||||
proxy($input, 'change', () => {
|
||||
const file = $input.files[0];
|
||||
loadVideo(file);
|
||||
});
|
||||
}
|
||||
|
||||
art.on('ready', () => {
|
||||
setting.add({
|
||||
title: 'Local Video',
|
||||
name: 'localVideo',
|
||||
index: 30,
|
||||
html: `
|
||||
<div class="art-setting-header">
|
||||
${i18n.get('Local Video')}
|
||||
</div>
|
||||
<div class="art-setting-upload">
|
||||
<div class="art-upload-btn">${i18n.get('Open')}</div>
|
||||
<div class="art-upload-value"></div>
|
||||
</div>
|
||||
`,
|
||||
mounted: $setting => {
|
||||
const $btn = query('.art-upload-btn', $setting);
|
||||
const $value = query('.art-upload-value', $setting);
|
||||
art.on('localVideo', file => {
|
||||
$value.textContent = file.name;
|
||||
$value.title = file.name;
|
||||
});
|
||||
attach($btn);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
name: 'localVideo',
|
||||
attach(target) {
|
||||
const $input = append(target, '<input type="file">');
|
||||
setStyle(target, 'position', 'relative');
|
||||
setStyles($input, {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
left: '0',
|
||||
top: '0',
|
||||
opacity: '0',
|
||||
});
|
||||
proxy($input, 'change', () => {
|
||||
const file = $input.files[0];
|
||||
loadVideo(file);
|
||||
});
|
||||
},
|
||||
attach,
|
||||
};
|
||||
}
|
||||
@@ -9,7 +9,7 @@ function settingMix(art) {
|
||||
|
||||
return {
|
||||
title: 'Subtitle',
|
||||
name: 'subtitle',
|
||||
name: 'subtitleOffset',
|
||||
index: 20,
|
||||
html: `
|
||||
<div class="art-setting-header">
|
||||
@@ -33,7 +33,7 @@ function settingMix(art) {
|
||||
$value.innerText = 0;
|
||||
});
|
||||
|
||||
art.on('artplayerPluginSubtitleOffset', value => {
|
||||
art.on('subtitleOffset', value => {
|
||||
subtitle.update();
|
||||
if ($range.value !== value) {
|
||||
$range.value = value;
|
||||
@@ -82,10 +82,10 @@ export default function subtitleOffset(art) {
|
||||
cue.endTime = clamp(cuesCache[index].endTime + time, 0, player.duration);
|
||||
});
|
||||
notice.show(`${i18n.get('Subtitle offset time')}: ${value}s`);
|
||||
art.emit('artplayerPluginSubtitleOffset', value);
|
||||
art.emit('subtitleOffset', value);
|
||||
} else {
|
||||
notice.show(`${i18n.get('No subtitles found')}`);
|
||||
art.emit('artplayerPluginSubtitleOffset', 0);
|
||||
art.emit('subtitleOffset', 0);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user