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

修改本地预览插件

Browse Source
This commit is contained in:
Harvey committed 2019-11-22 09:52:56 +08:00
1 parent 7c5d0f7385
commit 042745f001
15 files changed
+296 -129
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/i18n/zh-cn.json
+1
View File
@@ -23,6 +23,7 @@
"Aspect ratio": "画面比例",
"Default": "默认",
"Normal": "正常",
"Open": "打开",
"Switch video": "切换",
"Switch subtitle": "切换字幕",
"Fullscreen": "全屏",
packages/artplayer/src/i18n/zh-tw.json
+1
View File
@@ -23,6 +23,7 @@
"Aspect ratio": "畫面比例",
"Default": "默認",
"Normal": "正常",
"Open": "打開",
"Switch video": "切換",
"Switch subtitle": "切換字幕",
"Fullscreen": "全屏",
packages/artplayer/src/player/switchMix.js
+5 -5
View File
@@ -1,10 +1,10 @@
export default function switchMix(art, player) {
const { i18n, notice, option, template } = art;
const { i18n, notice, option } = art;
Object.defineProperty(player, 'switchQuality', {
value: (url, name = 'unknown') => {
if (url !== template.$video.src) {
URL.revokeObjectURL(template.$video.src);
if (url !== player.url) {
URL.revokeObjectURL(player.url);
const { currentTime, playing } = player;
return player.attachUrl(url).then(() => {
option.url = url;
@@ -26,8 +26,8 @@ export default function switchMix(art, player) {
Object.defineProperty(player, 'switchUrl', {
value: (url, name = 'unknown') => {
if (url !== template.$video.src) {
URL.revokeObjectURL(template.$video.src);
if (url !== player.url) {
URL.revokeObjectURL(player.url);
const { playing } = player;
return player.attachUrl(url).then(() => {
option.url = url;
packages/artplayer/src/plugins/autoPip.js
+2 -2
View File
@@ -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);
packages/artplayer/src/plugins/localSubtitle.js
+57 -17
View File
@@ -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,
};
}
packages/artplayer/src/plugins/localVideo.js
+57 -17
View File
@@ -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,
};
}
packages/artplayer/src/plugins/subtitleOffset.js
+4 -4
View File
@@ -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);
}
},
};
packages/artplayer/src/style/artplayer.scss
+12
View File
@@ -24,6 +24,18 @@
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background-color: #666;
}
::-webkit-scrollbar-thumb:hover {
background-color: #ccc;
}
.art-icon {
display: inline-flex;
justify-content: center;
packages/artplayer/src/style/setting.scss
+24
View File
@@ -77,6 +77,30 @@
margin-right: 5px;
}
}
.art-setting-upload {
display: flex;
.art-upload-btn {
width: 80px;
height: 22px;
line-height: 22px;
border: none;
outline: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
text-align: center;
}
.art-upload-value {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 22px;
line-height: 22px;
padding-left: 10px;
}
}
}
&.artplayer-setting-show {