javascript - vue是影片播放的問題？

Question

一個影片播放元件，從父元件接收影片url，點擊播放按鈕的時候把這個url給video標籤的src。出現報錯資訊說沒這個資源，好像是這個意思，但是審查元素，發現video標籤的src屬性已經有了想要的視屏位址。下面是我的程式碼：

<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>

這裡是報錯訊息：Uncaught (in promise) DOMException: The element has no supported sources.

#請問這是什麼原因

Answer 1

video中直接綁定videoUrl