javascript - Gibt es ein Problem mit Vue bei der Videowiedergabe?

Question

Eine Videowiedergabekomponente empfängt die Video-URL von der übergeordneten Komponente und gibt diese URL an den Quellcode des Video-Tags weiter, wenn auf die Wiedergabeschaltfläche geklickt wird. Es erscheint eine Fehlermeldung, die besagt, dass diese Ressource nicht verfügbar ist, was anscheinend auch gemeint ist, aber bei der Überprüfung des Elements stelle ich fest, dass das src-Attribut des Video-Tags bereits die gewünschte Videoadresse hat. Unten ist mein 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>

Hier ist die Fehlermeldung: Uncaught (in promise) DOMException: The element has no supported sources.

Was ist der Grund dafür

Answer 1

video中直接绑定videoUrl