在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.最后效果图

小结：记录前端踩坑的日子