vue 使用video.js循环
Posted lude1994
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 使用video.js循环相关的知识,希望对你有一定的参考价值。
<div style="margin-top: 50px; margin: 30px auto; width: 80%"> <el-tabs :tab-position="tabPosition" > <el-tab-pane label="如何添加" v-for="(item, i) in helpData"> <div class="box"> <div class="title">{{item.title}}</div> <div class="videobox"> <video :id="‘myVideo‘+item.id" class="video-js" > <source :src="videoSrc" type="video/mp4" > </video> </div> <div class="content">hhaha </div> </div> </el-tab-pane> </el-tabs> </div>
mounted() { this.initVideo(); }, methods: { initVideo() { //初始化视频方法 循环列表获取每个视频的id,helpData是data中的数组 this.helpData.map((item,i)=>{ let myPlayer = this.$video(‘myVideo‘+item.id, { //确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。 controls: true, //自动播放属性,muted:静音播放 autoplay: "muted", //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。 preload: "auto", //设置视频播放器的显示宽度(以像素为单位) width: "800px", //设置视频播放器的显示高度(以像素为单位) height: "400px", //封面图 // poster:item.pic }); }) } },
参考https://www.jianshu.com/p/d5ff26717cd5
以上是关于vue 使用video.js循环的主要内容,如果未能解决你的问题,请参考以下文章
Video.js组件在Vue项目中的综合使用详解(多个视频+倍速播放)