zoukankan      html  css  js  c++  java
  • vue 使用video.js循环

    <div style="margin-top: 50px; margin: 30px auto;  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",
                  //设置视频播放器的显示宽度(以像素为单位)
                   "800px",
                  //设置视频播放器的显示高度(以像素为单位)
                  height: "400px",
                  //封面图
                  // poster:item.pic
                });
              })
            }
          },

    参考https://www.jianshu.com/p/d5ff26717cd5

  • 相关阅读:
    kafka参数设置
    安装kafka多节点
    zookeeper集群搭建
    ubuntu安装spark
    ubuntu安装Scala
    elasticsearch添加访问密码
    springcloud整合分布式事务LCN
    springboot分布式事务
    K近邻(KNN)
    最大期望算法(EM算法)
  • 原文地址:https://www.cnblogs.com/lude1994/p/12296186.html
Copyright © 2011-2022 走看看