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

添加字幕本地预览

Browse Source
This commit is contained in:
Harvey committed 2019-11-14 14:00:24 +08:00
1 parent 2878705e72
commit 9cf1571ef8
15 files changed
+279 -81
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/assets/example/index.js
+15 -4
View File
@@ -20,7 +20,8 @@ var art = new Artplayer({
fullscreenWeb: true,
subtitleOffset: true,
miniProgressBar: true,
localPreview: true,
localVideo: true,
localSubtitle: true,
networkMonitor: false,
autoPip: true,
mutex: true,
@@ -105,11 +106,21 @@ var art = new Artplayer({
],
controls: [
{
name: 'preview',
name: 'localVideo',
position: 'right',
html: 'OPEN',
html: 'VIDEO',
tooltip: 'Open Local Video',
mounted: $preview => {
art.plugins.localPreview.attach($preview);
art.plugins.localVideo.attach($preview);
},
},
{
name: 'localSubtitle',
position: 'right',
html: 'SUBTITLE',
tooltip: 'Open Local Subtitle',
mounted: $preview => {
art.plugins.localSubtitle.attach($preview);
},
},
],
docs/document/README.md
+40 -7
View File
@@ -571,12 +571,12 @@ var art = new Artplayer({
});
```
## localPreview
## localVideo
- Type: `Boolean`
- Default: `false`
Local Preview plugin
Local video preview plugin
[Run Code](/)
@@ -585,14 +585,42 @@ var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
localPreview: true,
localVideo: true,
controls: [
{
name: 'preview',
position: 'right',
html: 'OPEN',
html: 'OPEN VIDEO',
mounted: $preview => {
art.plugins.localPreview.attach($preview);
art.plugins.localVideo.attach($preview);
},
},
],
});
```
## localSubtitle
- Type: `Boolean`
- Default: `false`
Local subtitle preview plugin
[Run Code](/)
```js
var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
localSubtitle: true,
controls: [
{
name: 'preview',
position: 'right',
html: 'OPEN SUBTITLE',
mounted: $preview => {
art.plugins.localSubtitle.attach($preview);
},
},
],
@@ -826,6 +854,7 @@ Custom layer, The type of layer is an object or function
| `style` | `Object` | The style object |
| `click` | `Function` | Click event |
| `mounted` | `Function` | Callback after mounted |
| `tooltip` | `String` | Tooltip text |
[Run Code](/)
@@ -864,6 +893,7 @@ Custom contextmenu, The type of layer is an object or function
| `style` | `Object` | The style object |
| `click` | `Function` | Click event |
| `mounted` | `Function` | Callback after mounted |
| `tooltip` | `String` | Tooltip text |
[Run Code](/)
@@ -901,6 +931,7 @@ Custom controls, The type of controls is an object or function
| `click` | `Function` | Click event |
| `mounted` | `Function` | Callback after mounted |
| `position` | `String` | The position where the controller appears: `top`, `left`, `right` |
| `tooltip` | `String` | Tooltip text |
[Run Code](/)
@@ -916,6 +947,7 @@ var art = new Artplayer({
position: 'right',
index: 10,
html: 'myController',
tooltip: 'This is my controller',
click: function() {
console.log('myController');
},
@@ -1018,6 +1050,7 @@ Player core function
| `toggle` | `Boolean` | Toggle play and pause |
| `volume` | `Number` | `Getter` and `Setter` of the current volume |
| `muted` | `Boolean` | `Getter` and `Setter` of the muted |
| `url` | `String` | `Getter` of the video url |
[Run Code](/)
@@ -1268,7 +1301,7 @@ var art = new Artplayer({
index: 10,
html: 'subtitle1',
click: function() {
art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.srt');
art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.srt', 'srt subtitle name');
},
};
},
@@ -1278,7 +1311,7 @@ var art = new Artplayer({
index: 20,
html: 'subtitle2',
click: function() {
art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt');
art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt', 'vtt subtitle name');
},
};
},
docs/uncompiled/artplayer.js
+109 -38
View File
@@ -651,7 +651,8 @@
fullscreenWeb: 'boolean',
subtitleOffset: 'boolean',
miniProgressBar: 'boolean',
localPreview: 'boolean',
localVideo: 'boolean',
localSubtitle: 'boolean',
autoPip: 'boolean',
networkMonitor: 'boolean',
plugins: ['function'],
@@ -663,7 +664,8 @@
html: validElement,
style: 'object|undefined',
click: 'function|undefined',
mounted: 'function|undefined'
mounted: 'function|undefined',
tooltip: 'string|undefined'
}],
contextmenu: [{
disable: 'boolean|undefined',
@@ -672,7 +674,8 @@
html: validElement,
style: 'object|undefined',
click: 'function|undefined',
mounted: 'function|undefined'
mounted: 'function|undefined',
tooltip: 'string|undefined'
}],
quality: [{
default: 'boolean|undefined',
@@ -687,6 +690,7 @@
style: 'object|undefined',
click: 'function|undefined',
mounted: 'function|undefined',
tooltip: 'string|undefined',
position: function position(value, type, paths) {
var position = ['top', 'left', 'right'];
return errorHandle(position.includes(value), "".concat(paths.join('.'), " only accept ").concat(position.toString(), " as parameters"));
@@ -880,7 +884,7 @@
"Web fullscreen": "网页全屏",
"Exit web fullscreen": "退出网页全屏",
"Mini player": "迷你播放器",
"This does not seem to support full screen functionality": "似乎不支持全屏功能"
"Does not support fullscreen": "不支持全屏"
};
var Close$1 = "關閉";
@@ -929,7 +933,7 @@
"Web fullscreen": "網頁全屏",
"Exit web fullscreen": "退出網頁全屏",
"Mini player": "迷你播放器",
"This does not seem to support full screen functionality": "似乎不支持全屏功能"
"Does not support fullscreen": "不支持全屏"
};
var I18n =
@@ -1288,6 +1292,7 @@
var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
if (url !== template.$video.src) {
URL.revokeObjectURL(template.$video.src);
var currentTime = player.currentTime,
playing = player.playing;
return player.attachUrl(url).then(function () {
@@ -1315,6 +1320,7 @@
var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
if (url !== template.$video.src) {
URL.revokeObjectURL(template.$video.src);
var playing = player.playing;
return player.attachUrl(url).then(function () {
option.url = url;
@@ -1683,7 +1689,7 @@
};
var screenfullError = function screenfullError() {
notice.show(i18n.get('This does not seem to support full screen functionality'));
notice.show(i18n.get('Does not support fullscreen'));
};
if (player.fullscreenIsEnabled) {
@@ -2090,6 +2096,10 @@
setStyles($element, option.style);
}
if (option.tooltip) {
tooltip($element, option.tooltip);
}
var childs = Array.from(target.children);
$element.dataset.index = option.index || componentID;
var nextChild = childs.find(function (item) {
@@ -3297,11 +3307,12 @@
createClass(Subtitle, [{
key: "switch",
value: function _switch(url) {
var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
var _this$art = this.art,
i18n = _this$art.i18n,
notice = _this$art.notice;
return this.init(url).then(function (blobUrl) {
notice.show(i18n.get('Switch subtitle'));
notice.show("".concat(i18n.get('Switch subtitle'), ": ").concat(name));
return blobUrl;
});
}
@@ -4225,47 +4236,28 @@
};
}
function localPreview(art) {
var _art$constructor$util = art.constructor.utils,
append = _art$constructor$util.append,
setStyle = _art$constructor$util.setStyle,
setStyles = _art$constructor$util.setStyles,
sleep = _art$constructor$util.sleep,
errorHandle = _art$constructor$util.errorHandle;
function localVideo(art) {
var proxy = art.events.proxy,
option = art.option,
notice = art.notice,
i18n = art.i18n,
template = art.template,
player = art.player;
var notSupport = 'Playback of this file format is not supported';
i18n.update({
'zh-cn': {
'Playback of this file format is not supported': '不支持播放该文件格式',
'Load local video successfully': '加载本地视频成功'
},
'zh-tw': {
'Playback of this file format is not supported': '不支持播放該文件格式',
'Load local video successfully': '加載本地視頻成功'
}
'zh-cn': defineProperty({}, notSupport, '不支持播放该文件格式'),
'zh-tw': defineProperty({}, notSupport, '不支持播放該文件格式')
});
function loadVideo(file) {
if (file) {
var type = getExt(file.name);
var canPlayType = template.$video.canPlayType(file.type);
if (canPlayType === 'maybe' || canPlayType === 'probably') {
var url = URL.createObjectURL(file);
player.playbackRate = false;
player.aspectRatio = false;
template.$video.src = url;
sleep(1000).then(function () {
player.currentTime = 0;
});
option.url = url;
art.emit('switch', url);
notice.show(i18n.get('Load local video successfully'));
player.switchUrl(url, file.name);
} else {
var tip = "".concat(i18n.get('Playback of this file format is not supported'), ": ").concat(file.type);
var tip = "".concat(i18n.get(notSupport), ": ").concat(file.type || type);
notice.show(tip, true, 3000);
errorHandle(false, tip);
}
@@ -4274,7 +4266,6 @@
proxy(template.$player, 'dragover', function (e) {
e.preventDefault();
notice.show(i18n.get('Load local video successfully'));
});
proxy(template.$player, 'drop', function (e) {
e.preventDefault();
@@ -4282,7 +4273,7 @@
loadVideo(file);
});
return {
name: 'localPreview',
name: 'localVideo',
attach: function attach(target) {
var $input = append(target, '<input type="file">');
setStyle(target, 'position', 'relative');
@@ -4302,6 +4293,81 @@
};
}
function localSubtitle(art) {
var proxy = art.events.proxy,
notice = art.notice,
i18n = art.i18n,
subtitle = art.subtitle;
var notSupport = 'Only supports subtitle files in .ass, .vtt and .srt format';
i18n.update({
'zh-cn': defineProperty({}, notSupport, '只支持 .ass、.vtt 和 .srt 格式的字幕文件'),
'zh-tw': defineProperty({}, notSupport, '只支持 .ass、.vtt 和 .srt 格式的字幕文件')
});
function loadSubtitle(file) {
if (file) {
var type = getExt(file.name);
if (['ass', 'vtt', 'srt'].includes(type)) {
var reader = new FileReader();
proxy(reader, 'load', function (event) {
var text = event.target.result;
switch (type) {
case 'srt':
{
var url = vttToBlob(srtToVtt(text));
subtitle.switch(url, file.name);
break;
}
case 'ass':
{
var _url = vttToBlob(assToVtt(text));
subtitle.switch(_url, file.name);
break;
}
case 'vtt':
{
var _url2 = vttToBlob(text);
subtitle.switch(_url2, file.name);
break;
}
}
});
reader.readAsText(file);
} else {
var tip = i18n.get(notSupport);
notice.show(tip, true, 3000);
errorHandle(false, tip);
}
}
}
return {
name: 'localSubtitle',
attach: function attach(target) {
var $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', function () {
var file = $input.files[0];
loadSubtitle(file);
});
}
};
}
function miniProgressBar(art) {
var layers = art.layers,
player = art.player,
@@ -4437,8 +4503,12 @@
this.add(miniProgressBar);
}
if (option.localPreview) {
this.add(localPreview);
if (option.localVideo) {
this.add(localVideo);
}
if (option.localSubtitle) {
this.add(localSubtitle);
}
if (option.networkMonitor) {
@@ -4652,7 +4722,8 @@
fullscreenWeb: false,
subtitleOffset: false,
miniProgressBar: false,
localPreview: false,
localVideo: false,
localSubtitle: false,
autoPip: false,
networkMonitor: false,
layers: [],
docs/uncompiled/artplayer.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableRest.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/eventsLine truncated
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableRest.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/eventsLine truncated
packages/artplayer/src/i18n/zh-cn.json
+2 -2
View File
@@ -30,5 +30,5 @@
"Web fullscreen": "网页全屏",
"Exit web fullscreen": "退出网页全屏",
"Mini player": "迷你播放器",
"This does not seem to support full screen functionality": "似乎不支持全屏功能"
}
"Does not support fullscreen": "不支持全屏"
}
packages/artplayer/src/i18n/zh-tw.json
+1 -1
View File
@@ -30,5 +30,5 @@
"Web fullscreen": "網頁全屏",
"Exit web fullscreen": "退出網頁全屏",
"Mini player": "迷你播放器",
"This does not seem to support full screen functionality": "似乎不支持全屏功能"
"Does not support fullscreen": "不支持全屏"
}
packages/artplayer/src/index.js
+2 -1
View File
@@ -123,7 +123,8 @@ class Artplayer extends Emitter {
fullscreenWeb: false,
subtitleOffset: false,
miniProgressBar: false,
localPreview: false,
localVideo: false,
localSubtitle: false,
autoPip: false,
networkMonitor: false,
layers: [],
packages/artplayer/src/player/fullscreenMix.js
+1 -1
View File
@@ -14,7 +14,7 @@ export default function fullscreenMix(art, player) {
};
const screenfullError = () => {
notice.show(i18n.get('This does not seem to support full screen functionality'));
notice.show(i18n.get('Does not support fullscreen'));
};
if (player.fullscreenIsEnabled) {
packages/artplayer/src/player/switchMix.js
+2
View File
@@ -4,6 +4,7 @@ export default function switchMix(art, player) {
Object.defineProperty(player, 'switchQuality', {
value: (url, name = 'unknown') => {
if (url !== template.$video.src) {
URL.revokeObjectURL(template.$video.src);
const { currentTime, playing } = player;
return player.attachUrl(url).then(() => {
option.url = url;
@@ -26,6 +27,7 @@ export default function switchMix(art, player) {
Object.defineProperty(player, 'switchUrl', {
value: (url, name = 'unknown') => {
if (url !== template.$video.src) {
URL.revokeObjectURL(template.$video.src);
const { playing } = player;
return player.attachUrl(url).then(() => {
option.url = url;
packages/artplayer/src/plugins/index.js
+8 -3
View File
@@ -1,6 +1,7 @@
import { errorHandle, hasOwnProperty } from '../utils';
import subtitleOffset from './subtitleOffset';
import localPreview from './localPreview';
import localVideo from './localVideo';
import localSubtitle from './localSubtitle';
import miniProgressBar from './miniProgressBar';
import networkMonitor from './networkMonitor';
import autoPip from './autoPip';
@@ -20,8 +21,12 @@ export default class Plugins {
this.add(miniProgressBar);
}
if (option.localPreview) {
this.add(localPreview);
if (option.localVideo) {
this.add(localVideo);
}
if (option.localSubtitle) {
this.add(localSubtitle);
}
if (option.networkMonitor) {
packages/artplayer/src/plugins/localSubtitle.js
+76
View File
@@ -0,0 +1,76 @@
import { append, setStyle, setStyles, errorHandle, getExt, vttToBlob, srtToVtt, assToVtt } from '../utils';
export default function localSubtitle(art) {
const {
events: { proxy },
notice,
i18n,
subtitle,
} = art;
const notSupport = 'Only supports subtitle files in .ass, .vtt and .srt format';
i18n.update({
'zh-cn': {
[notSupport]: '只支持 .ass、.vtt 和 .srt 格式的字幕文件',
},
'zh-tw': {
[notSupport]: '只支持 .ass、.vtt 和 .srt 格式的字幕文件',
},
});
function loadSubtitle(file) {
if (file) {
const type = getExt(file.name);
if (['ass', 'vtt', 'srt'].includes(type)) {
const reader = new FileReader();
proxy(reader, 'load', event => {
const text = event.target.result;
switch (type) {
case 'srt': {
const url = vttToBlob(srtToVtt(text));
subtitle.switch(url, file.name);
break;
}
case 'ass': {
const url = vttToBlob(assToVtt(text));
subtitle.switch(url, file.name);
break;
}
case 'vtt': {
const url = vttToBlob(text);
subtitle.switch(url, file.name);
break;
}
default:
break;
}
});
reader.readAsText(file);
} else {
const tip = i18n.get(notSupport);
notice.show(tip, true, 3000);
errorHandle(false, tip);
}
}
}
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);
});
},
};
}
packages/artplayer/src/plugins/localPreview.js → packages/artplayer/src/plugins/localVideo.js
+10 -19
View File
@@ -1,41 +1,33 @@
export default function localPreview(art) {
const { append, setStyle, setStyles, sleep, errorHandle } = art.constructor.utils;
import { append, setStyle, setStyles, errorHandle, getExt } from '../utils';
export default function localVideo(art) {
const {
events: { proxy },
option,
notice,
i18n,
template,
player,
} = art;
const notSupport = 'Playback of this file format is not supported';
i18n.update({
'zh-cn': {
'Playback of this file format is not supported': '不支持播放该文件格式',
'Load local video successfully': '加载本地视频成功',
[notSupport]: '不支持播放该文件格式',
},
'zh-tw': {
'Playback of this file format is not supported': '不支持播放該文件格式',
'Load local video successfully': '加載本地視頻成功',
[notSupport]: '不支持播放該文件格式',
},
});
function loadVideo(file) {
if (file) {
const type = getExt(file.name);
const canPlayType = template.$video.canPlayType(file.type);
if (canPlayType === 'maybe' || canPlayType === 'probably') {
const url = URL.createObjectURL(file);
player.playbackRate = false;
player.aspectRatio = false;
template.$video.src = url;
sleep(1000).then(() => {
player.currentTime = 0;
});
option.url = url;
art.emit('switch', url);
notice.show(i18n.get('Load local video successfully'));
player.switchUrl(url, file.name);
} else {
const tip = `${i18n.get('Playback of this file format is not supported')}: ${file.type}`;
const tip = `${i18n.get(notSupport)}: ${file.type || type}`;
notice.show(tip, true, 3000);
errorHandle(false, tip);
}
@@ -44,7 +36,6 @@ export default function localPreview(art) {
proxy(template.$player, 'dragover', e => {
e.preventDefault();
notice.show(i18n.get('Load local video successfully'));
});
proxy(template.$player, 'drop', e => {
@@ -54,7 +45,7 @@ export default function localPreview(art) {
});
return {
name: 'localPreview',
name: 'localVideo',
attach(target) {
const $input = append(target, '<input type="file">');
setStyle(target, 'position', 'relative');
packages/artplayer/src/scheme/index.js
+5 -1
View File
@@ -32,7 +32,8 @@ export default {
fullscreenWeb: 'boolean',
subtitleOffset: 'boolean',
miniProgressBar: 'boolean',
localPreview: 'boolean',
localVideo: 'boolean',
localSubtitle: 'boolean',
autoPip: 'boolean',
networkMonitor: 'boolean',
plugins: ['function'],
@@ -46,6 +47,7 @@ export default {
style: 'object|undefined',
click: 'function|undefined',
mounted: 'function|undefined',
tooltip: 'string|undefined',
},
],
contextmenu: [
@@ -57,6 +59,7 @@ export default {
style: 'object|undefined',
click: 'function|undefined',
mounted: 'function|undefined',
tooltip: 'string|undefined',
},
],
quality: [
@@ -75,6 +78,7 @@ export default {
style: 'object|undefined',
click: 'function|undefined',
mounted: 'function|undefined',
tooltip: 'string|undefined',
position: (value, type, paths) => {
const position = ['top', 'left', 'right'];
return errorHandle(
packages/artplayer/src/subtitle.js
+2 -2
View File
@@ -19,10 +19,10 @@ export default class Subtitle {
return '';
}
switch(url) {
switch(url, name = 'unknown') {
const { i18n, notice } = this.art;
return this.init(url).then(blobUrl => {
notice.show(i18n.get('Switch subtitle'));
notice.show(`${i18n.get('Switch subtitle')}: ${name}`);
return blobUrl;
});
}
packages/artplayer/src/utils/component.js
+5 -1
View File
@@ -1,4 +1,4 @@
import { append, setStyles, setStyle, remove, errorHandle, hasOwnProperty } from './index';
import { append, setStyles, setStyle, remove, errorHandle, hasOwnProperty, tooltip } from './index';
export default function component(art, parent, target, getOption, callback, title) {
const option = typeof getOption === 'function' ? getOption(art) : getOption;
@@ -20,6 +20,10 @@ export default function component(art, parent, target, getOption, callback, titl
setStyles($element, option.style);
}
if (option.tooltip) {
tooltip($element, option.tooltip);
}
const childs = Array.from(target.children);
$element.dataset.index = option.index || componentID;
const nextChild = childs.find(item => Number(item.dataset.index) >= Number($element.dataset.index));