解决vue动态绑定audio/video的src不能播放
2019-12-20 07:15
5692 查看
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>
方法一: 用$refs动态设置src
html代码如下(给video绑定个ref值):
<video ref="videoPlay" controls="controls" width='100%' height="100%"> 您的浏览器不支持 video 元素。 </video>
在需要动态绑定的方法里用$refs动态设置src
this.$refs.videoPlay.src = res.data.videoUrl;
方法二:src地址已切换或已重新赋值,重新加载audio/video
html代码如下:
<video :src="videoURL" ref="videoPlay" controls="controls" width='100%' height="100%"> 您的浏览器不支持 video 元素。 </video>
给video的src赋值,且重新加载video
getVideoURL() { this.videoURL = "视频地址" // 如果动态切换src地址,也要加上下面的事件(前提是src地址已切换或已重新赋值,再走这个事件) this.$nextTick(() => { this.$refs.videoPlay.load() }) }
相关文章推荐
- VUE动态绑定audio/video/img的src不能播放或显示
- 关于vue v-for循环解决img标签的src动态绑定问题
- h5-video3 解决html5 audio iphone,ipd,safari不能自动播放问题
- vue项目中动态绑定src不成功解决方法
- 解决用<img src="<%# Eval("ShowPhoto")%>"动态绑定图片,发布到IIS上无法显示的问题
- Vue 自定义标签的src属性不能使用相对路径的解决
- 在使用pyqt videopalyer不能播放MP4的解决方法
- ios vue2.0使用html5中的audio标签不能播放音乐
- angularjs中动态为audio绑定src
- Vue.js项目中使用jQuery动态添加html并绑定click事件,事件无法触发methods中方法的解决办法
- videojs能播放mp4,不能播放rtmp流的问题解决
- 快速解决vue动态绑定多个class的官方实例语法无效的问题
- cocos2dx3.2 使用SimpleAudioEngine时不能播放音频解决办法(中文路径问题)
- 前端js中动态添加的元素不能触发绑定事件解决方法
- angularjs中动态为audio绑定src
- vue通过video.js解决m3u8视频播放格式的方法
- vue + element 下拉框 选项绑定数据列表List,List动态变化后,下拉框下拉后数据不变化问题解决
- vue 动态加载图片src的解决办法
- 解决html5 video不能播放 能播放声音不能播放视频
- vue的图片src动态引入失败的解决办法