From 44454f6e3716b6365ab6ebe9f9eea0b69d716a3b Mon Sep 17 00:00:00 2001
From: zhaohappy <2281756061@qq.com>
Date: Sun, 12 May 2024 12:08:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20demo=20=E6=B7=BB=E5=8A=A0=E5=8A=A0?=
=?UTF-8?q?=E8=BD=BD=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
test/avplayer.html | 70 ++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 70 insertions(+)
diff --git a/test/avplayer.html b/test/avplayer.html
index a8300c18..a0f0e85c 100644
--- a/test/avplayer.html
+++ b/test/avplayer.html
@@ -153,6 +153,61 @@
/* margin: 0 50px; */
}
+ .loading-mask {
+ position: absolute;
+ z-index: 2000;
+ margin: 0;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 480px;
+ display: none;
+ }
+
+ .loading-spinner {
+ top: 50%;
+ margin-top: -21px;
+ width: 100%;
+ text-align: center;
+ position: absolute;
+ }
+
+ .loading-spinner .circular {
+ height: 42px;
+ width: 42px;
+ animation: loading-rotate 2s linear infinite;
+ }
+
+ .loading-spinner .circular .path {
+ animation: loading-dash 1.5s ease-in-out infinite;
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: 0;
+ stroke-width: 2;
+ stroke: #fff;
+ stroke-linecap: round;
+ }
+
+ @keyframes loading-rotate {
+ to {
+ transform: rotate(1turn)
+ }
+ }
+ @keyframes loading-dash {
+ 0% {
+ stroke-dasharray: 1,200;
+ stroke-dashoffset: 0
+ }
+
+ 50% {
+ stroke-dasharray: 90,150;
+ stroke-dashoffset: -40px
+ }
+
+ to {
+ stroke-dasharray: 90,150;
+ stroke-dashoffset: -120px
+ }
+ }
@@ -259,6 +314,16 @@
+
+
@@ -574,7 +639,12 @@
playRateDom.style.display = 'none'
}
+ document.querySelector('#loading-mask').style.display = 'block'
+
player.load(document.querySelector('#file').files[0] ? document.querySelector('#file').files[0] : urlComponent.url).then(() => {
+
+ document.querySelector('#loading-mask').style.display = 'none'
+
if (slider) {
slider.duration = Number(player.getDuration())
}