m3u8 播放视频
使用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:
·
使用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();
}
},
目前尝试攻略:海康插件播放视频流
更多推荐
所有评论(0)