🐛 修复一些问题

*无法实例化多个Artplayer
*生成图 div 无实际占位
This commit is contained in:
BTMuli
2023-12-07 13:51:08 +08:00
parent 919baca46c
commit 3883f9880a

View File

@@ -1,6 +1,10 @@
<template> <template>
<div class="tp-vod-box"> <div class="tp-vod-box">
<div class="tp-vod-container" data-html2canvas-ignore></div> <div
class="tp-vod-container"
data-html2canvas-ignore
:id="`tp-vod-${props.data.insert.vod.id}`"
></div>
<div class="tp-vod-cover"> <div class="tp-vod-cover">
<img alt="cover" :src="props.data.insert.vod.cover" /> <img alt="cover" :src="props.data.insert.vod.cover" />
<img src="/source/UI/video_play.svg" alt="icon" /> <img src="/source/UI/video_play.svg" alt="icon" />
@@ -48,7 +52,8 @@ console.log("tpVod", props.data.insert.vod.id, toRaw(props.data).insert.vod);
onMounted(async () => { onMounted(async () => {
const option: Option = { const option: Option = {
container: ".tp-vod-container", id: props.data.insert.vod.id.toString(),
container: `#tp-vod-${props.data.insert.vod.id}`,
url: "", url: "",
poster: props.data.insert.vod.cover, poster: props.data.insert.vod.cover,
type: "", type: "",
@@ -125,14 +130,16 @@ function getVodTime(): string {
<style lang="css" scoped> <style lang="css" scoped>
.tp-vod-box { .tp-vod-box {
position: relative; position: relative;
max-width: 100%;
margin: 10px auto; margin: 10px auto;
aspect-ratio: 16 / 9;
} }
.tp-vod-container { .tp-vod-container {
overflow: hidden; overflow: hidden;
max-width: 100%; max-width: 100%;
height: 450px;
border-radius: 10px; border-radius: 10px;
aspect-ratio: 16 / 9;
} }
.tp-vod-cover { .tp-vod-cover {