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

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

qq_43103581

3072人浏览 · 2018-09-03 13:54:11

qq_43103581 · 2018-09-03 13:54:11 发布

最近做了一个看似超级简单的项目，但是却遇到了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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^