dplayer Uncaught (in promise) TypeError: Cannot read properties of null (reading 'classList')


<template>
  <div id="dplayer"></div>
</template>

<script setup>
import DPlayer from 'dplayer';

const dp = new DPlayer({
  video: {
    url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
  },
});

</script>

<style scoped>
</style>

img

加上container还是报错哦

放在onMounted下面就可以了


<template>
  <div id="dplayer"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import DPlayer from 'dplayer';
import Hls from 'hls.js';

onMounted( () => {
  new DPlayer({
    //播放器的一些参数
    container: document.getElementById('dplayer'),
    video: {
      url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4', //视频地址
    }
  });
})

</script>

需要传入容器

const dp = new DPlayer({
  container: document.getElementById("dplayer"),
  video: {
    url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
  },
});

你 少了容器的配置项
https://dplayer.diygod.dev/zh/guide.html#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

img


const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mp4',
    },
});