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