• 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

  • 相关阅读:
    事务隔离级别
    手机摄影之生活拍照技巧
    html.unescape(s)
    正则表达式编译和DOTALL小结
    重试模块==>retrying
    js逆向==>js2py
    mysql索引设计原则
    Django请求与响应
    Linux常用命令
    C++11 auto_ptr 的问题
  • 原文地址:https://www.cnblogs.com/lude1994/p/12296186.html
Copyright © 2020-2023  润新知