1，vue播放视频之—引入.m3u8后缀的hsl视频流

在这里插入图片描述
效果图：

我这个是引入js的方式播放的。也可以用npm直接下载hsl.sj进行引入
1.public里面index.html页面引入对应的js

javascript"><script src="./jquery.min.js"></script>
<script src="./ezuikit.js"></script>
<script src="./hls.min.js"></script>
<script src="./jsPlugin-1.2.0.min.js"></script>

这些js太多了，私信我挨个发给你们
2，页面代码，也没什么，就一个for

javascript">      <div v-for="i in tableData" :key="i.index" >
          <video
          :id=i.id
          autoplay
          :src=i.location
          controls
          playsInline
          muted
          webkit-playsinline>
        </video>
      </div>

autoplay：自动播放。
controls：显示基本的控件。暂停、播放、进度条、等等
playsInline，webkit-playsinline：全屏播放控件
muted：兼容自动播放，有限浏览器不能自动播放就加这个属性

3，调接口
在这里插入图片描述
返回的数据格式是这样的，只要id和location就可以了。定义两个数组，一个数组转id和location。另一个数组只装id。用来停止播放的。

javascript">   methods: {
    searchs(currpage,pagesize){
      this.$axios.get(this.url+'listByAgencyCode',{params}).then( data=>{
        if(data.data.success){
          this.ids=[];// 置空ids中的内容
          let result = data.data.data;
          this.tableData = result.list;//页面上循环的对象数组 （格式：[{},{},{}]）
          this.totals = result.total;
          this.tableData.map((v,i) =>{
            this.tableData[i].id = "myPlayer_"+v.id;
          })
          for(let i=0,l = this.tableData.length;i<l;i++){//重新定义一个数组只装id
            this.ids.push(this.tableData[i].id);
          }
        }
      });
      // 延时渲染视频
      this.renderVedio();
    },
    renderVedio(){
      setTimeout(()=>{// 初始化视频
        this.players = [];
        for(var j=0;j<this.ids.length;j++){
          let player = new EZUIKit.EZUIPlayer(this.ids[j]);
          this.players.push(player);
        }
      },2000);
    },
    }
    //销毁视频
   destroyed () {
    for(var j=0;j<this.players.length;j++){
      this.players[j].stop();
    }
  }