|
@@ -24,6 +24,8 @@ import { browser } from "/src/utils";
|
|
|
import Note from "../note";
|
|
|
import { storeData } from "/src/store";
|
|
|
import Title from "/src/page-instrument/header-top/title";
|
|
|
+import { Vue3Lottie } from "vue3-lottie";
|
|
|
+import audioBga from "./image/audioBga.json";
|
|
|
|
|
|
type IItemType = "intonation" | "cadence" | "integrity";
|
|
|
|
|
@@ -76,7 +78,7 @@ export default defineComponent({
|
|
|
nextTick(() => {
|
|
|
const id = mediaType.value === "audio" ? "#audioSrc" : "#videoSrc";
|
|
|
shareData._plrl = new Plyr(id, {
|
|
|
- controls: ["play-large", "play", "progress", "current-time"],
|
|
|
+ controls: ["play-large", "play", "progress", "current-time", "duration"],
|
|
|
fullscreen: { enabled: false },
|
|
|
});
|
|
|
shareData.isInitPlyr = true;
|
|
@@ -303,7 +305,6 @@ export default defineComponent({
|
|
|
)}
|
|
|
</>
|
|
|
}
|
|
|
-
|
|
|
<Popup
|
|
|
teleport="body"
|
|
|
class={["popup-custom", "van-scale", styles.popup]}
|
|
@@ -314,19 +315,19 @@ export default defineComponent({
|
|
|
shareData._plrl?.pause();
|
|
|
}}
|
|
|
>
|
|
|
- {mediaType.value === "audio" && (
|
|
|
- <div class={styles.audiobox}>
|
|
|
- <audio
|
|
|
- id="audioSrc"
|
|
|
- src={scoreData.value.videoFilePath}
|
|
|
- controls="false"
|
|
|
- preload="metadata"
|
|
|
- playsinline
|
|
|
- />
|
|
|
- </div>
|
|
|
- )}
|
|
|
- {mediaType.value === "video" && (
|
|
|
- <div class={styles.videobox}>
|
|
|
+ <div class={styles.playerBox}>
|
|
|
+ {
|
|
|
+ mediaType.value === "audio" ?
|
|
|
+ <div class={styles.audioBox}>
|
|
|
+ <Vue3Lottie class={styles.audioBga} animationData={audioBga} loop={true}></Vue3Lottie>
|
|
|
+ <audio
|
|
|
+ id="audioSrc"
|
|
|
+ src={scoreData.value.videoFilePath}
|
|
|
+ controls="false"
|
|
|
+ preload="metadata"
|
|
|
+ playsinline
|
|
|
+ />
|
|
|
+ </div> :
|
|
|
<video
|
|
|
id="videoSrc"
|
|
|
class={styles.videoBox}
|
|
@@ -335,8 +336,8 @@ export default defineComponent({
|
|
|
preload="metadata"
|
|
|
playsinline
|
|
|
/>
|
|
|
- </div>
|
|
|
- )}
|
|
|
+ }
|
|
|
+ </div>
|
|
|
</Popup>
|
|
|
|
|
|
<Popup
|