<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