使用m3u8 播放视频：

m3u8在线播放 只需放视频链接即可 链接 http://tool.liumingye.cn/m3u8/index.php

下载 m3u8 js css 链接：https://pan.baidu.com/s/1dTAX_1B6hrF50O92a6GxuQ
提取码：yyds

引入到 vue 在index.html里面或者npm 下载
引入js

引入css

在data里面定义

options: {
        autoplay: true, // 设置自动播放
        muted: true, // 设置为true 自动播放
        preload: "auto", // 预加载
        controls: false, // 显示播放的控件
      },
      player: null,

定义播放的方法 // m3u8播放

getVideo(url) {
 // videojs的第一个参数表示的是，文档中video的id
      this.player = videojs("videoPlayer", this.options);
      console.log(url, "这是urls,视频链接");
      // 关键代码， 动态设置src，才可实现换台操作
      this.player.src([
        {
          src: url,
          type: "application/x-mpegURL",
        },
      ]);
    },

//触发这个方法 定义一个点击事件 把需要播放的流放进去
//点击的时候传递点击的信息

addclick(data){
//调用 定义好的 m3u8视频播放的方法
var urls = data.src //视频的路径 复制给一个变量传递到这个方法里面当一个形参,里面的方法要用
this.getVideo(urls )
}
或者定义两个点击事件自测一下
 addnodewu() {
      this.videosrclist =
        "http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8";
      this.getVideo(this.videosrclist);
    },
    addnodewu2() {
      this.videosrclist =
        "http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8";
      this.getVideo(this.videosrclist);
    },

离开了组件一定要 销毁视频实例不然会报错 或者播放不了
// m3u8 销毁

destroyed() {
  if (this.player) {
    this.player.dispose(); 
  }
},

目前尝试攻略:海康插件播放视频流