在vue項目中播放m3u8格式視頻

前言：最近公司在做一個線上會議的項目，要求后台網站播放m3u8格式的視頻，查找部分資料，總結一下，方便后邊查閱

1.在vue工程中安裝以下依賴：

cnpm install  video.js --save

 cnpm install videojs-contrib-hls --save

//我使用的是淘寶鏡像源，下載會快一點，沒有用npm

2.在需要播放的頁面引入

import videojs from 'video.js'
import 'videojs-contrib-hls'

3.准備一個容器，我這里是視頻列表

<div v-for="(item,index) in this.videolist.pageData" :key="index">
        <div class="videoitem">

    
      //因為id唯一，在遍歷的時候給id加上下標，便於區分； poster是封面圖

          <video  :id="'my-video'+index" class="video-js vjs-default-skin imgs" 
            controls preload="auto" poster="../../images/huiyi.jpg">
              <source :src="item.url" type="application/x-mpegURL">
          </video>



          <div class="video_text">
            <h1 class="video_h1">標題 ： <span>{{item.title}}</span></h1> 
            <p class="video_p">創建時間:<span>{{item.createDate}}</span></p> 
          </div>    
        </div>
      </div>

3.在mounted中獲取到初始化的視頻地址列表（在這里我做了一個粗暴的操作）

  mounted() {

     setTimeout(_ => {  
           let lang=this.videolist.pageData.length   //視頻長度
          for(let i=0;i<lang;i++){

              //id+i是為了id的唯一性

                videojs("my-video"+i, {   //播放的事件
                  textTrackDisplay: false,
                  posterImage: true,
                  errorDisplay: false,
                  controlBar: true,
                  hls: {
                    withCredentials: true
                  }
                }, function () {
                  // this.play()   //取消自動播放
                })
              }


        }, 1000);
  },   

4.最后效果圖

小結：記錄前端踩坑的日子