码迷,mamicode.com
首页 > Web开发 > 详细

vue 使用video.js循环

时间:2020-02-11 19:07:54      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:数据   position   www   let   使用   单位   control   com   属性   

<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循环

标签:数据   position   www   let   使用   单位   control   com   属性   

原文地址:https://www.cnblogs.com/lude1994/p/12296186.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!