vue项目中videoPlayer 的 src 视频地址参数动态修改---方法

方法很简单：相信大家的问题应该是改变src的值吧，动态赋值这一步简单。
this.playerOptions[‘sources‘][0][‘src‘] 就是这一步解决提取src问题，主要部分用*号框起来了。

playerOptions 参数是一个字典对吧！修改字典中的值怎么做不用多说吧直接赋值就好了，下面方法的重点就是取出src参数进行赋值。

你们视频的url从数据库通过动态获取过来的时候，直接赋值给这个字典中的src就行了，赋值方法：this.playerOptions[‘sources‘][0][‘src‘] = this.url;
这是method中的方法响应成功后进行赋值的this.url是自行定义的变量。这个时候你们明白怎么动态修改src的值了吧？
（能获取了，想在哪赋值想怎么赋值都行了）。

data中只要改这里就好了

          sources: [{ // 播放资源和资源格式type: "video/mp4",src: ‘ ‘ //你的视频地址（先为空，之后动态赋值）}],

此处时methods方法中的函数
下面的方法是另一个页面点击响应视频跳到这个网页，这个页面接收到参数id并根据id从后端提取视频的url

get_num(){this.num = this.$route.params.id;if(this.num===‘521‘){this.url = ‘http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4‘}else{this.$axios.get(`${this.$settings.HOST}/planes/repair/${this.num}`,).then(response => {**最关键的地方***加粗样式#响应成功的数据中提取url赋值给变量urlthis.url = "http://api.planecity.cn:8000"+ response.data[‘repair_video‘];#将url赋值给srcthis.playerOptions[‘sources‘][0][‘src‘] = this.url;*console.log(this.url)}).catch(error => {console.log(error);console.log(‘对不起维修信息获取失败‘)})}return this.num;},

vue项目中videoPlayer 的 src 视频地址参数动态修改---方法相关推荐

Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）
一.首先下载 postcss-pxtorem 运行npm install postcss-pxtorem 完成下载之后,在package.json文件中添加这段代码 "postcss&quo ...
前端报错如何在服务器中显示,详解Vue项目中出现Loading chunk {n} failed问题的解决方法...
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...
第一次在Vue项目中播放m3u8格式视频遇到的问题和解决方法
一.m3u8文件第一次接触这种m3u8格式的视频文件,开始以为类似与.mp4这种,所以在项目中我通过html5提供的video标签做播放功能发现并不能成功,后来了解到M3U8文件是一种UTF-8编码 ...
Vue项目中，如何实现HTML标签后，修改标签内的文本
Vue.js是一个流行的开源JavaScript框架,它可以帮助开发者更加轻松地构建用户界面.在Vue.js中,我们可以使用指令来绑定事件和响应用户交互. 本文将讲解如何在Vue.js项目中实现用户双 ...
vue 项目中使用wangEditor上传图片视频到oos
废话: 最近在做商城后台管理的项目, 商品详情需要使用富文本编辑器, 需要上传图片和上传视频的功能. 关于富文本: 富文本选择: wangEditor , froalaEditor 我个人是喜欢fro ...
vue项目中img的src动态赋值
没想到这破东西,居然这么折腾人. 时间紧,长话短说.一般这个动态赋值,要用require.而且,这个require里,只能有一个变量,多个变量,有运算,有方法,都不行. 1.不行 <img:sr ...
vue项目中svg图（svg标签）的使用方法
几天前,ui无法把我拉进项目iconfont库,只好切了一份svg图包给我,于是琢磨了怎么用,简单地记录一下其实所在项目什么都配置好了,真正用到的只有最后一项 1. 安装依赖 npm install ...
Vue项目中出现Loading chunk {n} failed问题的解决方法
由于项目里面用到了vue-router,vue-router的错误处理函数 onError 是不是能够捕获该错误呢?我们来看一下官方文档的说明: 当在渲染一个路由的过程中,需要尝试解析一个异步组件时发 ...
vue项目中elementUI的日期时间选择器的默认修改以及能选择当天的未来时间24点
在elementUI的el-date-picker中默认为选中的0点到第二个选中的0点相应代码: <el-date-picker size="mini" v-model=& ...

vue项目中videoPlayer 的 src 视频地址参数动态修改---方法

vue项目中videoPlayer 的 src 视频地址参数动态修改---方法相关推荐

最新文章

热门文章