javascript - vue ada masalah dengan main balik video?

Question

Komponen main balik video menerima url video daripada komponen induk dan memberikan url ini kepada src tag video apabila butang main diklik. Mesej ralat muncul mengatakan bahawa sumber ini tidak tersedia, yang nampaknya maksudnya, tetapi apabila memeriksa elemen, saya mendapati bahawa atribut src teg video sudah mempunyai alamat video yang dikehendaki. Di bawah ialah kod saya:

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

Berikut ialah mesej ralat: Uncaught (in promise) DOMException: The element has no supported sources.

Apa sebab ni

Answer 1

Ikat videoUrl terus dalam video