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; + } +} 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" /> @@ -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);