vue cycle using 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=">
              "video box<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 () {
         the this .initVideo (); 
      }, 
      Methods: { 
        initVideo () { 
          // initialize loop method to obtain the list of video id for each video, helpData an array data in 
          the this .helpData.map ( (Item, I) => { 
            the let myPlayer = the this . $ video ( ' myVideo ' + item.id, {
               // determine whether the player has control user can interact with no control, the only way to start the video playback, or by using properties autoplay API player. 
              Controls: to true ,
               // autoplay property, muted: mute play 
              autoplay: " muted ",
               // recommend whether the browser should load element in the <video> to start downloading the video data immediately. 
              PRELOAD: " Auto " ,
               // set the video player display width (in pixels) 
              width: " 800px " ,
               // set the video player display height (in pixels) 
              height: " 400px " ,
               // FIG cover
               // Poster: item.pic 
            }); 
          }) 
        } 
      },

Reference https://www.jianshu.com/p/d5ff26717cd5

Guess you like

Origin www.cnblogs.com/lude1994/p/12296186.html