mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-19 11:21:20 -08:00
添加重连机制
This commit is contained in:
Harvey Zack committed
1 parent
a738f97764
commit
f488529d4f
7 files changed
+79
-67
No files matched your search
+4
-2
@@ -8,7 +8,8 @@ let i18nMap = {
|
||||
'Play': '播放',
|
||||
'Pause': '暂停',
|
||||
'Rate': '速度',
|
||||
'Mute': '静音'
|
||||
'Mute': '静音',
|
||||
'Reconnect': '重新连接'
|
||||
},
|
||||
'zh-tw': {
|
||||
'About author': '關於作者',
|
||||
@@ -19,7 +20,8 @@ let i18nMap = {
|
||||
'Play': '播放',
|
||||
'Pause': '暫停',
|
||||
'Rate': '速度',
|
||||
'Mute': '靜音'
|
||||
'Mute': '靜音',
|
||||
'Reconnect': '重新連接'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
+27
-40
@@ -1,49 +1,36 @@
|
||||
<svg class="lds-spinner" width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default">
|
||||
<rect x="0" y="0" width="100" height="100" fill="none" class="bk"/>
|
||||
<rect x="47" y="40" width="6" height="20" rx="5" ry="5" fill="#ffffff" transform="rotate(0 50 50) translate(0 -30)">
|
||||
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="-1s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g><g transform="rotate(30 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
|
||||
<rect x="47" y="40" width="6" height="20" rx="5" ry="5" fill="#ffffff" transform="rotate(30 50 50) translate(0 -30)">
|
||||
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g><g transform="rotate(60 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
|
||||
<rect x="47" y="40" width="6" height="20" rx="5" ry="5" fill="#ffffff" transform="rotate(60 50 50) translate(0 -30)">
|
||||
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g><g transform="rotate(90 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
|
||||
<rect x="47" y="40" width="6" height="20" rx="5" ry="5" fill="#ffffff" transform="rotate(90 50 50) translate(0 -30)">
|
||||
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="-0.75s" repeatCount="indefinite"/></rect>
|
||||
<rect x="47" y="40" width="6" height="20" rx="5" ry="5" fill="#ffffff" transform="rotate(120 50 50) translate(0 -30)">
|
||||
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g><g transform="rotate(120 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
|
||||
<rect x="47" y="40" width="6" height="20" rx="5" ry="5" fill="#ffffff" transform="rotate(150 50 50) translate(0 -30)">
|
||||
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g><g transform="rotate(150 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
|
||||
<rect x="47" y="40" width="6" height="20" rx="5" ry="5" fill="#ffffff" transform="rotate(180 50 50) translate(0 -30)">
|
||||
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="-0.5s" repeatCount="indefinite"/></rect>
|
||||
<rect x="47" y="40" width="6" height="20" rx="5" ry="5" fill="#ffffff" transform="rotate(210 50 50) translate(0 -30)">
|
||||
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g><g transform="rotate(180 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
|
||||
<rect x="47" y="40" width="6" height="20" rx="5" ry="5" fill="#ffffff" transform="rotate(240 50 50) translate(0 -30)">
|
||||
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g><g transform="rotate(210 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
|
||||
<rect x="47" y="40" width="6" height="20" rx="5" ry="5" fill="#ffffff" transform="rotate(270 50 50) translate(0 -30)">
|
||||
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="-0.25s" repeatCount="indefinite"/></rect>
|
||||
<rect x="47" y="40" width="6" height="20" rx="5" ry="5" fill="#ffffff" transform="rotate(300 50 50) translate(0 -30)">
|
||||
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g><g transform="rotate(240 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
|
||||
<rect x="47" y="40" width="6" height="20" rx="5" ry="5" fill="#ffffff" transform="rotate(330 50 50) translate(0 -30)">
|
||||
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g><g transform="rotate(270 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(300 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(330 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g></svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.1 KiB |
+20
-10
@@ -7,6 +7,8 @@ export default class Player {
|
||||
this.init();
|
||||
this.eventBind();
|
||||
this.firstLoad = false;
|
||||
this.reconnectTime = 0;
|
||||
this.maxReconnectTime = 5;
|
||||
}
|
||||
|
||||
init() {
|
||||
@@ -22,7 +24,7 @@ export default class Player {
|
||||
}
|
||||
|
||||
eventBind() {
|
||||
const { events: { proxy }, refs: { $player, $video }, i18n, notice } = this.art;
|
||||
const { option, events: { proxy }, refs: { $player, $video }, i18n, notice } = this.art;
|
||||
|
||||
config.video.events.forEach(eventName => {
|
||||
proxy($video, eventName, event => {
|
||||
@@ -55,7 +57,7 @@ export default class Player {
|
||||
this.art.controls.show();
|
||||
this.art.mask.show();
|
||||
this.art.loading.hide();
|
||||
if (this.art.option.autoplay) {
|
||||
if (option.autoplay) {
|
||||
const promise = this.play();
|
||||
if (promise !== undefined) {
|
||||
promise.then().catch(err => {
|
||||
@@ -81,20 +83,28 @@ export default class Player {
|
||||
this.art.isPlaying = false;
|
||||
this.art.controls.show();
|
||||
this.art.mask.show();
|
||||
if (this.art.option.loop) {
|
||||
if (option.loop) {
|
||||
this.seek(0);
|
||||
this.play();
|
||||
}
|
||||
});
|
||||
|
||||
this.art.on('video:error', () => {
|
||||
this.art.isError = true;
|
||||
this.art.isPlaying = false;
|
||||
this.art.loading.hide();
|
||||
this.art.controls.hide();
|
||||
$player.classList.add('artplayer-error');
|
||||
notice.show(i18n.get('Video load failed'), false);
|
||||
this.art.destroy();
|
||||
if (this.reconnectTime < this.maxReconnectTime) {
|
||||
setTimeout(() => {
|
||||
this.reconnectTime++;
|
||||
$video.src = option.url;
|
||||
notice.show(`${i18n.get('Reconnect')}: ${this.reconnectTime}`);
|
||||
}, 1000);
|
||||
} else {
|
||||
this.art.isError = true;
|
||||
this.art.isPlaying = false;
|
||||
this.art.loading.hide();
|
||||
this.art.controls.hide();
|
||||
$player.classList.add('artplayer-error');
|
||||
notice.show(i18n.get('Video load failed'), false);
|
||||
this.art.destroy();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user