From a6a2fbc88b67c78c2e854a9ed4b05b3d41222ee2 Mon Sep 17 00:00:00 2001
From: LiuJiaNan <liujianan@zcloudchina.com>
Date: Fri, 15 Mar 2024 09:23:39 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=92=AD=E6=94=BE=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=8E=BB=E6=8E=89=E5=80=8D=E9=80=9F=E5=92=8C=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ali-player/index.vue | 41 +++++++++++++++++++++++++++++
 src/components/video/index.vue      | 20 ++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/src/components/ali-player/index.vue b/src/components/ali-player/index.vue
index f4542c8..55b2c71 100644
--- a/src/components/ali-player/index.vue
+++ b/src/components/ali-player/index.vue
@@ -43,6 +43,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  showProgress: {
+    type: Boolean,
+    default: true,
+  },
   playTime: {
     type: Number,
     default: 0,
@@ -77,6 +81,34 @@ onMounted(() => {
 const fnCreateAliPlayer = async () => {
   await nextTick();
   fnDisposeAliPlayer();
+  const skinLayout = [
+    { name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
+    { name: "H5Loading", align: "cc" },
+    { name: "errorDisplay", align: "tlabs", x: 0, y: 0 },
+    { name: "infoDisplay" },
+    { name: "tooltip", align: "blabs", x: 0, y: 56 },
+    { name: "thumbnail" },
+    {
+      name: "controlBar",
+      align: "blabs",
+      x: 0,
+      y: 0,
+      children: [
+        { name: "playButton", align: "tl", x: 15, y: 12 },
+        { name: "timeDisplay", align: "tl", x: 10, y: 7 },
+        { name: "fullScreenButton", align: "tr", x: 10, y: 12 },
+        { name: "setting", align: "tr", x: 15, y: 12 },
+        { name: "volume", align: "tr", x: 5, y: 10 },
+      ],
+    },
+  ];
+  props.showProgress &&
+    skinLayout.at(-1).children.unshift({
+      name: "progress",
+      align: "blabs",
+      x: 0,
+      y: 44,
+    });
   player = new window.Aliplayer(
     {
       id: "J_prismPlayer",
@@ -99,6 +131,7 @@ const fnCreateAliPlayer = async () => {
       height: props.height,
       autoplay: props.autoplay,
       useH5Prism: true,
+      skinLayout,
     },
     (player) => {
       props.autoplay && player.play();
@@ -139,4 +172,12 @@ defineExpose({
   width: v-bind(width);
   height: v-bind(height);
 }
+
+:deep {
+  .prism-setting-speed,
+  .prism-setting-cc,
+  .prism-setting-audio {
+    display: none;
+  }
+}
 </style>
diff --git a/src/components/video/index.vue b/src/components/video/index.vue
index bea5a81..596a553 100644
--- a/src/components/video/index.vue
+++ b/src/components/video/index.vue
@@ -6,6 +6,10 @@
       :vid="vid"
       :play-auth="playAuth"
       :visible="visible"
+      :cover="cover"
+      :autoplay="autoplay"
+      :show-progress="showProgress"
+      :play-time="playTime"
     />
   </el-dialog>
 </template>
@@ -41,6 +45,22 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  cover: {
+    type: String,
+    default: "",
+  },
+  autoplay: {
+    type: Boolean,
+    default: true,
+  },
+  showProgress: {
+    type: Boolean,
+    default: true,
+  },
+  playTime: {
+    type: Number,
+    default: 0,
+  },
 });
 const emits = defineEmits(["update:visible"]);
 const visible = useVModel(props, "visible", emits);