前端video标签播放m3u8格式视频,vue中使用video标签视频播放
这篇文章主要介绍了如何在某视频剪辑软件中使用视频。射流研究…播放m3u8格式的视频，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下
目录
一、安装二、引入视频
三、在组件中测试并使用
1.实现基本的自动播放
2.实现换台
四、踩坑小记
1.视频不能自动播放或报错DOMException: play()失败
2.换台的时候，网址已经成功更改，但视频还是之前的
3.找不到mux.js模块
五、播放实时消息传送协议流
@[目录]注意：
^2.6.11,
视频。^7.10.2，
^5.15.0 ,
“多路复用器。js":^5.7.0
一、安装
故事添加视频。射流研究…
纱线添加videojs-contrib-hls //这是播放流媒体流需要的插件
纱线添加mux.js //在某视频剪辑软件项目中，若不安装它可能报错
二、引入videojs
1.在科学研究委员会文件夹下新建插件文件夹，并新建视频。射流研究…文件；
视频。射流研究…文件的内容如下：
导入“视频。js/dist/video-js。CSS”；//引入视频。射流研究…的钢性铸铁
从" videojs-contrib-hls "导入HLS//播放流媒体流需要的插件
从“Vue”导入Vue
vue。使用(HLS)；
2.在主页。射流研究…中引入刚刚的视频。射流研究…文件
"导入"。/插件/视频。js’；//引入刚刚定义的视频。射流研究…文件
三、在组件中测试并使用
1. 实现基本的自动播放
测试。某视频剪辑软件文件
模板
div class=test-videojs
视频id=视频播放器 class=视频-js 静音/视频
/div
/模板
脚本
从" video.js "导入视频js；//引入视频
导出默认值{
data() {
返回{
//https://test-streams . mux . dev/x 36 xhzz/x 36 xhzz . m3u 8是一段视频，可将cctv1(是活着现场直播，不能快退)的替换为它，看到快进快退的效果
nowPlayVideoUrl:“IVI http://号。北邮。edu。cn/HLS/CCTV 1高清。m3 u8
};
},
已安装(){
这个。初始化视频(这个。nowplayvideourl)；
},
方法：{
initVideo(nowPlayVideoUrl) {
//这些选择属性也可直接设置在录像标签上，见柔和的
let options={
autoplay: true，//设置自动播放
控件：true，//显示播放的控件
来源：[
//注意，如果是以选择权方式设置的src，是不能实现换台的（即使监听了nowPlayVideoUrl也没实现)
{
src: nowPlayVideoUrl，
类型： application/x-mpegURL //告诉视频视频，这是一个流媒体流
}
]
};
//视频的第一个参数表示的是，文档中录像的编号
const my plyer=Videojs(视频播放器，选项，函数onPlayerReady() {
console.log(onPlayerReady中的这指的是：,这个);//这里的这是指玩家，是由视频创建出来的实例
控制台。log(我的plyer===this)；//这里返回的是真实的
});
}
}
};
/脚本
样式lang=scss
#视频播放器{
宽度：500像素
高度：300像素
边距：50px自动；
}
/风格
视频播放效果如图：
打印结果如图：
2. 实现换台
测试。某视频剪辑软件文件
模板
div class=" test-videojs "
视频id=视频播放器 class= video-js /video
El-button type= danger @ click= change source 切换到CCTV3/el按钮
/div
/模板
脚本
从" video.js "导入视频js；//引入视频
导出默认值{
data() {
返回{
nowPlayVideoUrl: http://IVI . bupt . edu . cn/HLS/CCTV 1 HD . m3 u8 ，
选项：{
autoplay: true，//设置自动播放
静音：真，//设置了它为没错，才可实现自动播放，同时视频也被静音（铬66及以上版本，禁止音视频的自动播放)
预加载："自动",//预加载
控件：true //显示播放的控件
},
玩家：空
};
},
已安装(){
这个。获取视频(这个。nowplayvideourl)；
},
方法：{
getVideo(nowPlayVideoUrl) {
这个。player=Videojs(视频播放器，这个。选项)；
//关键代码，动态设置src，才可实现换台操作
this.player.src([
{
src: nowPlayVideoUrl，
类型： application/x-mpegURL //告诉视频视频，这是一个流媒体流
}
]);
},
changeSource() {
这个。nowplayvideourl=http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8；
控制台。日志(这个。 nowplayvideourl，改变了);
}
},
观察：{
nowPlayVideoUrl(newVal，old) {
this . get video(new val)；
}
},
销毁前(){
if (this.player) {
this . player . dispose()；//移除播放器，这将重置videojs的内部状态并移除dom
}
}
};
/脚本
样式lang=scss
#视频播放器{
宽度：500px
高度：300px
边距：50px自动；
}
/风格
视频切换效果如图所示：
四、踩坑小记
1. 视频不能自动播放 或报错 DOMException: play() failed
需要用静音属性解决。
错误消息：domexception: play()失败，因为用户没有首先与文档进行交互。(用户尚未交互，无法调用play)
解决方法：将静音属性设置为true。
video id= video player class= video-js 静音/视频
关于静音属性：
Muted属性，该属性设置或返回音频是否应该静音(关闭声音)；属性的值为true和false
Muted=false 表示视频不需要静音(视频播放时有声音)，但设置了muted= false 时，视频无法自动播放。
视频标签中静音的作用：允许视频自动播放；(Chrome66版本66启动，禁止自动播放视频和音频)
2. 换台的时候，url已经成功更改，但视频还是之前的
你需要动态设置src来实现。
//动态设置src
this.player.src([
{
src: nowPlayVideoUrl，
键入： application/x-mpegURL //告诉videojs这是一个hls流
}
]);
3. 找不到mux.js模块
错误消息：* mux.js/lib/tools/parse-sidx在。/node _ modules/video . js/dist/video . es . js要安装它，可以运行：mux.js/lib/tools/parse-sidx NPM安装-保存
解决方法：安装mux.js
纱线添加mux.js
五、 播放rtmp流
播放rtmp流的操作与播放hls流的操作几乎相同，只是：
导入“videojs-flash”；//播放rtmp流所需的插件
Type: rtmp/flv ，//这个Type值必须写出来告诉videojs这是一个rtmp流视频。
这就是如何使用video.js在vue中播放m3u8格式的视频。更多关于vue用videojs播放m3u8格式视频的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。