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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM