init

.eslintrc.cjs

@@ -30,5 +30,6 @@ module.exports = {
   globals: {
     BMapGL: "readonly",
     JSEncrypt: "readonly",
+    Aliplayer: "readonly",
   }
 };

index.html

@@ -15,5 +15,7 @@
             src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr"></script>
     <script type="text/javascript" src="/jsencrypt.min.js"></script>
     <script type="module" src="/src/main.js"></script>
+    <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css" />
+    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js"></script>
   </body>
 </html>

src/components/ali-player/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="J_prismPlayer" />
+</template>
+
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, watch } from "vue";
+import { useDocumentVisibility } from "@vueuse/core";
+
+let player = null;
+defineOptions({
+  name: "AliPlayer",
+});
+const props = defineProps({
+  source: {
+    type: [String, Array],
+    required: true,
+    default: "",
+  },
+  cover: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: String,
+    default: "100%",
+  },
+  height: {
+    type: String,
+    default: "600px",
+  },
+});
+const visibility = useDocumentVisibility();
+onMounted(() => {
+  watch(
+    () => props.source,
+    () => {
+      if (props.source) fnCreateAliPlayer();
+    },
+    {
+      immediate: true,
+    }
+  );
+  watch(
+    () => visibility.value,
+    () => {
+      if (visibility.value === "hidden") {
+        pause();
+      } else {
+        play();
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+});
+const fnCreateAliPlayer = async () => {
+  await nextTick();
+  fnDisposeAliPlayer();
+  player = new window.Aliplayer(
+    {
+      id: "J_prismPlayer",
+      source: props.source,
+      cover: props.cover,
+      width: props.width,
+      height: props.height,
+      autoplay: true,
+      useH5Prism: true,
+    },
+    (player) => {
+      player.play();
+    }
+  );
+};
+const fnDisposeAliPlayer = () => {
+  if (!player) return;
+  player.dispose();
+  player = null;
+};
+onBeforeUnmount(() => {
+  fnDisposeAliPlayer();
+});
+const play = () => {
+  player && player.play();
+};
+const pause = () => {
+  player && player.pause();
+};
+</script>
+
+<style scoped lang="scss">
+#J_prismPlayer {
+  width: v-bind(width);
+  height: v-bind(height);
+}
+</style>