当前位置：首页 > article >正文

弹框调取阿里云播放器一直报错 TypeError: 没有为播放器指定容器

article 2024/11/15 0:43:58

<template>
  <el-dialog
    v-model="dialogpeopleVisible"
    :before-close="handleClose"
    class="aliyunplayDialog"
  >
    <!-- :show-close = "false" -->
     <div>查看</div>
    <div  class="prism-player" id="playerContainer" ></div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
const player1 = ref(null);
const isAliplayerLoaded = ref(false)
const init = () => {
  if (player1.value) {
    // 如果已经创建了，就销毁
    player1.value.dispose();
    player1.value = null;
  }


  player1.value = new Aliplayer({
    id: 'playerContainer',
    source: infoValue.value,
    width: "100%",
    height: "522px",
    ratio: 16 / 9,
    autoplay: true,
    isLive: false,
  }, function (player) {
    console.log("The player is created");
  });
};
const dialogpeopleVisible = ref(false);

const infoValue = ref({});
const openDialog = (bool, info) => {
  console.log(info, "009990999jjggff");
  dialogpeopleVisible.value = bool;
  infoValue.value = info;
  init()
};
const handleClose = () => {
  dialogpeopleVisible.value = false;
  player1.value.dispose();
};

defineExpose({ openDialog, handleClose });
</script>
<style lang="scss">
.prism-player{
width:750px;

}
</style>

openDialog 打开弹框init初始化阿里云播放器组件，但是一直报错
dialog打开后opened事件（因为aliplayer的创建时机是需要控制创建时机的，不然会找不到容器）

在这里插入图片描述
调取阿里云播放器组件的方法写在 @opened=“opena”

<template>
  <el-dialog
    v-model="dialogpeopleVisible"
    :before-close="handleClose"
    class="aliyunplayDialog"
    @opened="opena" 
  >
    <!-- :show-close = "false" -->
     <div>查看</div>
    <div  class="prism-player" id="playerContainer" ></div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
const player1 = ref(null);
const isAliplayerLoaded = ref(false)
const opena = () => {
  if (player1.value) {
    // 如果已经创建了，就销毁
    player1.value.dispose();
    player1.value = null;
  }


  player1.value = new Aliplayer({
    id: 'playerContainer',
    source: infoValue.value,
    width: "100%",
    height: "522px",
    ratio: 16 / 9,
    autoplay: true,
    isLive: false,
  }, function (player) {
    console.log("The player is created");
  });
};
const dialogpeopleVisible = ref(false);

const infoValue = ref({});
const openDialog = (bool, info) => {
  console.log(info, "009990999jjggff");
  dialogpeopleVisible.value = bool;
  infoValue.value = info;
};
const handleClose = () => {
  dialogpeopleVisible.value = false;
  player1.value.dispose();
};

defineExpose({ openDialog, handleClose });
</script>
<style lang="scss">
.prism-player{
width:750px;

}
</style>

查看全文

http://www.kler.cn/a/305806.html