使用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的idthis.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(); }
},
目前尝试攻略:海康插件播放视频流
