mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-15 00:56:16 -08:00
add config dir
This commit is contained in:
Harvey Zack committed
1 parent
682dda0ec8
commit
32478ecb14
16 files changed
+212
-135
No files matched your search
@@ -0,0 +1,9 @@
|
||||
import mimeCodec from './mimeCodec';
|
||||
import mse from './mse';
|
||||
import video from './video';
|
||||
|
||||
export default {
|
||||
mimeCodec,
|
||||
mse,
|
||||
video
|
||||
};
|
||||
File renamed without changes.
@@ -1,5 +1,5 @@
|
||||
export default {
|
||||
instance: {
|
||||
mediaSource: {
|
||||
propertys: [
|
||||
'activeSourceBuffers',
|
||||
'duration',
|
||||
File renamed without changes.
@@ -26,6 +26,12 @@ export default class Contextmenu {
|
||||
{
|
||||
text: 'ArtPlayer __VERSION__',
|
||||
link: 'https://github.com/zhw2590582/artplayer'
|
||||
},
|
||||
{
|
||||
text: i18n.get('Close'),
|
||||
click: () => {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
+4
-2
@@ -1,11 +1,13 @@
|
||||
const i18nMap = {
|
||||
'zh-cn': {
|
||||
'About author': '关于作者',
|
||||
'Video info': '视频统计信息'
|
||||
'Video info': '视频统计信息',
|
||||
'Close': '关闭'
|
||||
},
|
||||
'zh-tw': {
|
||||
'About author': '關於作者',
|
||||
'Video info': '影片統計訊息'
|
||||
'Video info': '影片統計訊息',
|
||||
'Close': '關閉'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
+37
-40
@@ -1,40 +1,37 @@
|
||||
<svg class="lds-bluecat" width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
||||
<g transform="rotate(0.97464 50 50)">
|
||||
<animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1" begin="-0.15000000000000002s"></animateTransform>
|
||||
<circle cx="50" cy="50" r="39.891" stroke="#6994b7" stroke-width="14.4" fill="none" stroke-dasharray="0 300">
|
||||
<animate attributeName="stroke-dasharray" values="15 300;55.1413599195142 300;15 300" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.069s"></animate>
|
||||
</circle>
|
||||
<circle cx="50" cy="50" r="39.891" stroke="#eeeeee" stroke-width="7.2" fill="none" stroke-dasharray="0 300">
|
||||
<animate attributeName="stroke-dasharray" values="15 300;55.1413599195142 300;15 300" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.069s"></animate>
|
||||
</circle>
|
||||
<circle cx="50" cy="50" r="32.771" stroke="#000000" stroke-width="1" fill="none" stroke-dasharray="0 300">
|
||||
<animate attributeName="stroke-dasharray" values="15 300;45.299378454348094 300;15 300" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.069s"></animate>
|
||||
</circle>
|
||||
<circle cx="50" cy="50" r="47.171" stroke="#000000" stroke-width="1" fill="none" stroke-dasharray="0 300">
|
||||
<animate attributeName="stroke-dasharray" values="15 300;66.03388996804073 300;15 300" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.069s"></animate>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<g transform="rotate(11.1822 50 50)">
|
||||
<animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1"></animateTransform>
|
||||
<path fill="#6994b7" stroke="#000000" d="M97.2,50.1c0,6.1-1.2,12.2-3.5,17.9l-13.3-5.4c1.6-3.9,2.4-8.2,2.4-12.4"></path>
|
||||
<path fill="#eeeeee" d="M93.5,49.9c0,1.2,0,2.7-0.1,3.9l-0.4,3.6c-0.4,2-2.3,3.3-4.1,2.8l-0.2-0.1c-1.8-0.5-3.1-2.3-2.7-3.9l0.4-3 c0.1-1,0.1-2.3,0.1-3.3"></path>
|
||||
<path fill="#6994b7" stroke="#000000" d="M85.4,62.7c-0.2,0.7-0.5,1.4-0.8,2.1c-0.3,0.7-0.6,1.4-0.9,2c-0.6,1.1-2,1.4-3.2,0.8c-1.1-0.7-1.7-2-1.2-2.9 c0.3-0.6,0.5-1.2,0.8-1.8c0.2-0.6,0.6-1.2,0.7-1.8"></path>
|
||||
<path fill="#6994b7" stroke="#000000" d="M94.5,65.8c-0.3,0.9-0.7,1.7-1,2.6c-0.4,0.9-0.7,1.7-1.1,2.5c-0.7,1.4-2.3,1.9-3.4,1.3h0 c-1.1-0.7-1.5-2.2-0.9-3.4c0.4-0.8,0.7-1.5,1-2.3c0.3-0.8,0.7-1.5,0.9-2.3"></path>
|
||||
</g>
|
||||
<g transform="rotate(0.97464 50 50)">
|
||||
<animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1" begin="-0.15000000000000002s"></animateTransform>
|
||||
<path fill="#eeeeee" stroke="#000000" d="M86.9,35.3l-6,2.4c-0.4-1.2-1.1-2.4-1.7-3.5c-0.2-0.5,0.3-1.1,0.9-1C82.3,33.8,84.8,34.4,86.9,35.3z"></path>
|
||||
<path fill="#eeeeee" stroke="#000000" d="M87.1,35.3l6-2.4c-0.6-1.7-1.5-3.3-2.3-4.9c-0.3-0.7-1.2-0.6-1.4,0.1C88.8,30.6,88.2,33,87.1,35.3z"></path>
|
||||
<path fill="#6994b7" stroke="#000000" d="M82.8,50.1c0-3.4-0.5-6.8-1.6-10c-0.2-0.8-0.4-1.5-0.3-2.3c0.1-0.8,0.4-1.6,0.7-2.4c0.7-1.5,1.9-3.1,3.7-4l0,0 c1.8-0.9,3.7-1.1,5.6-0.3c0.9,0.4,1.7,1,2.4,1.8c0.7,0.8,1.3,1.7,1.7,2.8c1.5,4.6,2.2,9.5,2.3,14.4"></path>
|
||||
<path fill="#eeeeee" d="M86.3,50.2l0-0.9l-0.1-0.9l-0.1-1.9c0-0.9,0.2-1.7,0.7-2.3c0.5-0.7,1.3-1.2,2.3-1.4l0.3,0 c0.9-0.2,1.9,0,2.6,0.6c0.7,0.5,1.3,1.4,1.4,2.4l0.2,2.2l0.1,1.1l0,1.1"></path>
|
||||
<path fill="#ff9922" d="M93.2,34.6c0.1,0.4-0.3,0.8-0.9,1c-0.6,0.2-1.2,0.1-1.4-0.2c-0.1-0.3,0.3-0.8,0.9-1 C92.4,34.2,93,34.3,93.2,34.6z"></path>
|
||||
<path fill="#ff9922" d="M81.9,38.7c0.1,0.3,0.7,0.3,1.3,0.1c0.6-0.2,1-0.6,0.9-0.9c-0.1-0.3-0.7-0.3-1.3-0.1 C82.2,38,81.8,38.4,81.9,38.7z"></path>
|
||||
<path fill="#000000" d="M88.5,36.8c0.1,0.3-0.2,0.7-0.6,0.8c-0.5,0.2-0.9,0-1.1-0.3c-0.1-0.3,0.2-0.7,0.6-0.8C87.9,36.3,88.4,36.4,88.5,36.8z"></path>
|
||||
<path stroke="#000000" d="M85.9,38.9c0.2,0.6,0.8,0.9,1.4,0.7c0.6-0.2,0.9-0.9,0.6-2.1c0.3,1.2,1,1.7,1.6,1.5c0.6-0.2,0.9-0.8,0.8-1.4"></path>
|
||||
<path fill="#6994b7" stroke="#000000" d="M86.8,42.3l0.4,2.2c0.1,0.4,0.1,0.7,0.2,1.1l0.1,1.1c0.1,1.2-0.9,2.3-2.2,2.3c-1.3,0-2.5-0.8-2.5-1.9l-0.1-1 c0-0.3-0.1-0.6-0.2-1l-0.3-1.9"></path>
|
||||
<path fill="#6994b7" stroke="#000000" d="M96.2,40.3l0.5,2.7c0.1,0.5,0.2,0.9,0.2,1.4l0.1,1.4c0.1,1.5-0.9,2.8-2.2,2.9h0c-1.3,0-2.5-1.1-2.6-2.4 L92.1,45c0-0.4-0.1-0.8-0.2-1.2l-0.4-2.5"></path>
|
||||
<path fill="#000000" d="M91.1,34.1c0.3,0.7,0,1.4-0.7,1.6c-0.6,0.2-1.3-0.1-1.6-0.7c-0.2-0.6,0-1.4,0.7-1.6C90.1,33.1,90.8,33.5,91.1,34.1z"></path>
|
||||
<path fill="#000000" d="M85.5,36.3c0.2,0.6-0.1,1.2-0.7,1.5c-0.6,0.2-1.3,0-1.5-0.6C83,36.7,83.4,36,84,35.8C84.6,35.5,85.3,35.7,85.5,36.3z"></path>
|
||||
|
||||
</g></svg>
|
||||
<svg class="lds-default" width="85px" height="85px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="75" cy="50" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.9166666666666666s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.9166666666666666s"></animate>
|
||||
</circle><circle cx="71.65063509461098" cy="62.5" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.8333333333333334s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.8333333333333334s"></animate>
|
||||
</circle><circle cx="62.5" cy="71.65063509461096" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.75s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.75s"></animate>
|
||||
</circle><circle cx="50" cy="75" fill="undefined" r="3.66667">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.6666666666666666s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.6666666666666666s"></animate>
|
||||
</circle><circle cx="37.50000000000001" cy="71.65063509461098" fill="undefined" r="4.33333">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.5833333333333334s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.5833333333333334s"></animate>
|
||||
</circle><circle cx="28.34936490538903" cy="62.5" fill="undefined" r="5">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.5s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.5s"></animate>
|
||||
</circle><circle cx="25" cy="50" fill="undefined" r="4.33333">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.4166666666666667s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.4166666666666667s"></animate>
|
||||
</circle><circle cx="28.34936490538903" cy="37.50000000000001" fill="undefined" r="3.66667">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.3333333333333333s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.3333333333333333s"></animate>
|
||||
</circle><circle cx="37.499999999999986" cy="28.349364905389038" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.25s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.25s"></animate>
|
||||
</circle><circle cx="49.99999999999999" cy="25" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.16666666666666666s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.16666666666666666s"></animate>
|
||||
</circle><circle cx="62.5" cy="28.349364905389034" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.08333333333333333s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.08333333333333333s"></animate>
|
||||
</circle><circle cx="71.65063509461096" cy="37.499999999999986" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="0s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="0s"></animate>
|
||||
</circle></svg>
|
||||
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 4.7 KiB |
@@ -1,5 +1,6 @@
|
||||
import './style/index.scss';
|
||||
import verification from './utils/verification';
|
||||
import config from './config';
|
||||
import Emitter from 'tiny-emitter';
|
||||
import Template from './template';
|
||||
import I18n from './i18n';
|
||||
@@ -31,6 +32,10 @@ class Artplayer extends Emitter {
|
||||
return '__VERSION__';
|
||||
}
|
||||
|
||||
static get config() {
|
||||
return config;
|
||||
}
|
||||
|
||||
static get DEFAULTS() {
|
||||
return {
|
||||
container: document.querySelector('.artplayer'),
|
||||
|
||||
+1
-1
@@ -23,6 +23,6 @@ export default class Loading {
|
||||
|
||||
show() {
|
||||
this.state = true;
|
||||
this.art.refs.$loading.style.display = 'block';
|
||||
this.art.refs.$loading.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
+30
-12
@@ -1,6 +1,5 @@
|
||||
import { errorHandle, request } from './utils';
|
||||
import mimeCodeces from './utils/mimeCodeces';
|
||||
import mseConfig from './utils/mseConfig';
|
||||
import config from './config';
|
||||
|
||||
export default class Mse {
|
||||
constructor(art) {
|
||||
@@ -9,21 +8,27 @@ export default class Mse {
|
||||
this.init();
|
||||
this.eventBind();
|
||||
this.eventStart();
|
||||
this.repeat = 0;
|
||||
this.maxRepeat = 5;
|
||||
}
|
||||
|
||||
setMimeCodec() {
|
||||
const { option } = this.art;
|
||||
if (!option.type) {
|
||||
const type = option.url.trim().toLowerCase().split('.').pop();
|
||||
const type = option.url
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.split('.')
|
||||
.pop();
|
||||
errorHandle(
|
||||
Object.keys(mimeCodeces).includes(type),
|
||||
Object.keys(config.mimeCodec).includes(type),
|
||||
`Can't find video's type '${type}' from '${option.url}'`
|
||||
);
|
||||
option.type = type;
|
||||
}
|
||||
|
||||
if (!option.mimeCodec) {
|
||||
const mimeCodec = mimeCodeces[option.type];
|
||||
const mimeCodec = config.mimeCodec[option.type];
|
||||
errorHandle(
|
||||
mimeCodec,
|
||||
`Can't find video's mimeCodec from ${option.type}`
|
||||
@@ -43,16 +48,16 @@ export default class Mse {
|
||||
);
|
||||
this.mediaSource = new MediaSource();
|
||||
$video.src = URL.createObjectURL(this.mediaSource);
|
||||
this.art.events.destroys.push(() => {
|
||||
this.art.events.destroyEvents.push(() => {
|
||||
URL.revokeObjectURL($video.src);
|
||||
});
|
||||
}
|
||||
|
||||
eventBind() {
|
||||
const { proxy } = this.art.events;
|
||||
const { instance, sourceBufferList } = mseConfig;
|
||||
const { mediaSource, sourceBufferList } = config.mse;
|
||||
|
||||
instance.events.forEach(eventName => {
|
||||
mediaSource.events.forEach(eventName => {
|
||||
proxy(this.mediaSource, eventName, event => {
|
||||
this.art.emit(`mediaSource:${event.type}`, event);
|
||||
});
|
||||
@@ -71,7 +76,7 @@ export default class Mse {
|
||||
eventStart() {
|
||||
const { option } = this.art;
|
||||
const { proxy } = this.art.events;
|
||||
const { sourceBuffer } = mseConfig;
|
||||
const { sourceBuffer } = config.mse;
|
||||
|
||||
this.art.on('mediaSource:sourceopen', () => {
|
||||
this.sourceBuffer = this.mediaSource.addSourceBuffer(option.mimeCodec);
|
||||
@@ -86,8 +91,21 @@ export default class Mse {
|
||||
this.mediaSource.endOfStream();
|
||||
});
|
||||
|
||||
request(option.url).then(response => {
|
||||
this.sourceBuffer.appendBuffer(response);
|
||||
});
|
||||
this.fetchUrl();
|
||||
}
|
||||
|
||||
fetchUrl() {
|
||||
const { option, notice } = this.art;
|
||||
request(option.url)
|
||||
.then(response => {
|
||||
this.sourceBuffer.appendBuffer(response);
|
||||
})
|
||||
.catch(err => {
|
||||
if (this.repeat++ < this.maxRepeat) {
|
||||
this.fetchUrl();
|
||||
} else {
|
||||
notice.show(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
import { clamp } from './utils';
|
||||
import mediaElement from './utils/mediaElement';
|
||||
import config from './config';
|
||||
|
||||
export default class Player {
|
||||
constructor(art) {
|
||||
@@ -21,7 +21,7 @@ export default class Player {
|
||||
eventBind() {
|
||||
const { proxy } = this.art.events;
|
||||
const { $video } = this.art.refs;
|
||||
const { events } = mediaElement;
|
||||
const { events } = config.video;
|
||||
events.forEach(eventName => {
|
||||
proxy($video, eventName, event => {
|
||||
this.art.emit(`video:${event.type}`, event);
|
||||
|
||||
@@ -71,6 +71,7 @@
|
||||
}
|
||||
|
||||
.artplayer-loading {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
left: 0;
|
||||
@@ -79,11 +80,8 @@
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.artplayer-notice {
|
||||
|
||||
Reference in new issue
Block a user