Un composant de lecture vidéo reçoit l'URL de la vidéo du composant parent et donne cette URL au src de la balise vidéo lorsque vous cliquez sur le bouton de lecture. Un message d'erreur apparaît indiquant que cette ressource n'est pas disponible, ce qui semble être ce que cela signifie, mais lors de l'inspection de l'élément, je constate que l'attribut src de la balise vidéo possède déjà l'adresse vidéo souhaitée. Ci-dessous mon code :

<template>
  <p id="vedioComponent">
    <video id="vdo" webkit-playsinline playsinline controls v-show="isVdoShow" :src="reciveVideoUrl"></video>
    <img id="poster" v-show="isPosterShow" :src="posterUrl" alt="">
    <img id="loading" v-show="isLoadingShow" src="https://hybrid.xiaoying.tv/web/active/krFAQ/static/imgs/load.gif" alt="">
    <img @click="play()" id="playBtn" v-show="isPlayBtnShow" src="https://hybrid.xiaoying.tv/web/active/krFAQ/static/imgs/playBtn.png" alt="">
  </p>
</template>

<script>
export default {
  props: [ 'videoUrl', 'posterUrl' ],
  data () {
    return {
      isVdoShow: false,
      isPosterShow: true,
      isLoadingShow: false,
      isPlayBtnShow: true,
      reciveVideoUrl: ''
    }
  },
  mounted () {
    //  给视频容器设置高
    var screenW = window.screen.width
    document.getElementById('vedioComponent').style.height = screenW + 'px'
    //  添加可播放事件
    var vdo = document.getElementById('vdo')
    vdo.addEventListener('canplay', function () {
      console.log(1)
      this.isVdoShow = true
      this.isLoadingShow = false
      this.isPosterShow = false
    })
  },
  methods: {
    //  点击播放按钮播放视屏
    play: function () {
      this.reciveVideoUrl = this.videoUrl             //  获取视频url
      var vdo = document.getElementById('vdo')
      vdo.play()
      this.isLoadingShow = true
      this.isPlayBtnShow = false
    }
  }
}
</script>

Voici le message d'erreur : Uncaught (in promise) DOMException: The element has no supported sources.

Quelle est la raison de cela