解决vue 异步获取接口数据 动态绑定 video标签src属性失效的问题方法集合

前几天写个pc的项目，要求要本地上传视频至服务器，再回显可播放。心想这简单啊，直接vue双向绑定不就轻松解决，没想到遇到个大坑~src绑定视频时，视频未刷新、视频黑屏并不能播放。

video标签中src从后台获取回来后视频仅仅是转了个圈，无法正常播放

 

我使用的解决办法

使用原生的js,操作src属性，避免使用vue和jquery。

html代码如下：

<video
  autoplay
  controls="controls"
  class="short-video wp-100"
  style="height: 535px"
  id="videoPlay"
  >
   <source :type="'video/mp4' || 'video/avi' || 'video/mov'"/>
</video>

主要是给video标签增加了id="videoPlay"

id="videoPlay"

给source标签src赋值

document.getElementById("videoPlay").src = url; //url为你需要播放的视频地址

其它相关解决办法

1.play() 方法开始播放当前的音频或视频。

let dom = document.getElementById('videoPlay');
dom.play();

2.使用VUE的$refs特性，不了解的同学自己去VUE看文档，传送门

给video绑定个ref值

<video
  autoplay
  controls="controls"
  class="short-video wp-100"
  style="height: 535px"
  ref="videoPlay"
  >
   <source :type="'video/mp4' || 'video/avi' || 'video/mov'"/>
</video>

在需要动态绑定的方法里用$refs动态设置src

this.$refs.videoPlay.src = res.data.videoPlay_url //res.data.videoPlay_url为需要播放的视频链接地址

3.后台数据请求回来赋值后加上这句

document.querySelector(‘video’).load();