vue项目动态src ，video无法正常播放问题记录

问题记录

在vue2项目中，mp4视频地址由后端异步请求获取，使用静态的url时视频能够正常播放，异步请求获取视频地址，:src='“url” 视频出现无法播放的问题

---

---

测试代码

后端返回的数据

{
    "code": 200,
    "msg": "test",
    "data": "https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4"
}

<template>
  <div class="wrapper">
    <video :src="data.url" controls="controls">您的浏览器不支持 video 标签。</video>
<!--    <video controls width="250" >-->
<!--      <source :src="data.url" type="video/mp4">-->
<!--      Download the-->
<!--      <a href="/media/cc0-videos/flower.mp4">MP4</a>-->
<!--      video.-->
<!--    </video>-->
<!--    <vue-core-video-player :src="data.url"></vue-core-video-player>-->
  </div>
</template>

<script>
import axios from 'axios';

export default {
  created() {
    // this.getData();
  },
  data() {
    return {
      data: {
        url: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
      }
    };
  },
  methods: {
    getData() {
      const that = this;
      axios({
        url: 'http://127.0.0.1:8081/api/test',
        method: 'get'
      }).then(res => {
        console.log(res.data.data);
        that.data.url = res.data.data;
      });
    }
  }
};
</script>

提示：以下是本篇文章正文内容，下面案例可供参考

测试1

将url 绑定在video标签的src属性上，vue实例的data中 data.url 没有初值也可以正常播放

<video :src="data.url" controls="controls">您的浏览器不支持 video 标签。</video>
data() {
    return {
      data: {
        url: ''
      }
    };
  },

测试2

将url 绑定在video标签内source 标签的src属性上，vue实例的data中 data.url 不管有没有初值都无法播放后端传输的url，有初始值播放的是有初始值的视频

<video controls width="250" >
      <source :src="data.url" type="video/mp4">
      Download the
      <a href="/media/cc0-videos/flower.mp4">MP4</a>
      video.
    </video>
    
    data() {
    return {
      data: {
        url: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
      }
    };
  },

测试3

将url 绑定在vue-core-video-player插件的src属性上，vue实例的data中 data.url 有初值可以正常播放

<vue-core-video-player :src="data.url"></vue-core-video-player>

data() {
    return {
      data: {
        url: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
      }
    };
  },

插件地址

文档目录: vue-core-video-player