vue 手机端无法播放动态加载的视频

最近做了一个看似超级简单的项目，但是却遇到了n多的问题，好不容易将所有坑都填平了，但是，在即将提测之时，PM的一句话，又开始了填坑之路……
言归正传，视频文件想跟其他的文件（如ppt，pdf，txt等）一样查看下载，在手机上却实现不了，需要一个播放器，于是放进了video中，预览本地的是没问题的，代码如下：

<video width="100%" controls poster="xxx.jpg">
<source src="xxx.mp4">
your browser does not support the video tag
</video>

但是，视频是通过接口来的，于是换成动态url，此时手机端却不能播放了

<video width="100%" controls poster="xxx.jpg">
<source :src="url">
your browser does not support the video tag
</video>

各种查资料后，得出，原来动态加载视频的时候，需要给video一个ref，通过 this.$refs.videos.src来获取url地址

<video width="100%" controls ref="videos" poster="xxx.jpg">
<source :src="url">
your browser does not support the video tag
</video>

this.$refs.videos.src = xxx