vue 播放视频流,vue实现视频播放
本文主要介绍vue加载视频流，实现直播功能的过程，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
前言一、什么是视频流？2.vue加载rtmp视频流1。方法一：video.js2方法二：ckplayer 3。vue加载hls视频流1.index.html中的2.video-player.vue文件。
前言
最近在项目里有一个功能就是播放监控现场的图像和视频(类似直播)，然后对此做一个记录和总结！
在这个函数中，后台最初给出了rtmp格式的视频流。在网上搜索了几种方式，发现rtmp视频流需要使用flash player。但是各大浏览器都抛弃了flash，所以最后改用hls视频流，终于完成了这个功能！(如果只是想要一个成功的代码，请直接看：3。vue加载hls视频流)
一、视频流是什么？
视频流：视频流其实就是流媒体，是指将一系列数据压缩，通过网段发送，即时传输，用于观看音视频的技术。流媒体一般用于监控、直播等实时广播功能。流媒体协议：流媒体协议是一种标准化的交付方式，用于将视频分成多个块，发送给视频播放器，播放器重组播放。常见的有rtmp、hls、hds、mss、MPEG-DASH等。视频格式（format）：视频格式是指视频文件格式(容器格式)。常见的容器格式包括. mp4、 m4v、avi，mov等。三个定义这里不再赘述，想了解更多的朋友可以自己去了解。Rtmp视频流实际上是rtmp流媒体协议生成的流媒体；hls视频流也是如此(这种视频流的格式一般由后台控制)
二、vue加载rtmp视频流
1.方法一：video.js
npm安装-保存vue-视频播放器
npm安装-保存视频-flash
模板
div class=box
section id= video class= video-js vjs-default-skin ref= viodeRef /section
/div
/模板
脚本
从“video.js”导入视频
导入 video.js/dist/video-js.min.css
导出默认值{
名称：“视频播放盒”，
已安装(){
this.player=Video(video ，{
//确定播放器是否有用户可以与之交互的控件。不，启动视频播放的唯一方法是使用autoplay属性或通过播放器API。
控制：正确，
//自动播放属性，静音：无声播放
静音：假，
自动播放：没错，
//建议浏览器是否应该在视频加载元素后立即开始下载视频数据。
预加载：“自动”，
//设置视频播放器的显示宽度(以像素为单位)
宽度：“800像素”，
//设置视频播放器的显示高度(以像素为单位)
高度：“500像素”，
//海报： https://static.shuxuejia.com/img/video _ image . png ，//封面图片
来源：[{
src: rtmp://58 . 200 . 131 . 2:1935/live TV/CCTV 3 ，
类型：“视频/rtmp”
}],
播放速率：[0.5，1，1.5，2] //以双倍速度播放
}，function onPlayerReady() {
Video.log(你的播放器准备好了！);//比如：播放音量1的请求
this.on(ended ，function() {
Video.log(Awww.这么快就结束了？);
});
});
//this . my player . src( rtmp://10 . 15 . 3 . 31:1935/live/openUrl/qud plmm )
//this . my player . load( rtmp://10 . 15 . 3 . 31:1935/live/openUrl/qud plmm )
},
销毁前(){
if (this.player) {
this.player.dispose()
}
},
}
/脚本
样式范围的语言=scss 。方框{
宽度：100%；
身高：100%；
显示器：flex
对齐-项目：居中；
justify-content:居中；视频{
边距：0自动；
}
}
/风格
2.方法二：ckplayer
因为我试过因为flash原因无法使用，所以已经全部删除，没有部分截图。用文字描述一下就可以了，感兴趣的朋友可以自己搜索一下。
第一步：官网下载超酷猫白血病病毒播放器第二步：将下载好的文件夹解压后放到项目中的静态（静态资源文件夹)下第三步：在index.html中对应引入ckplayer.js文件第四步：创建播放视频的某视频剪辑软件文件，代码如下：模板
差异
标签播放器播放器插件某视频剪辑软件使用演示/标签
div id=video/div
/div
/模板
脚本
导出默认值{
名称：" ckplayerPlugin "，
data () {
返回{
}
},
已安装：函数(){
//挂载完成后进行
var videoObject={
容器： #video ，//容器的身份或类名
变量："玩家",//播放函数名称
已加载：" loadedHandler "，//当播放器加载后执行的函数
loop: true，//播放结束是否循环播放
CK轨道：静态/CK球员/材料/SRT。 SRT ，//字幕文件
海报：静态/CK播放器/材料/海报。 jpg ，//封面图片
预览：{ //预览图片
文件：[静态/CK播放器/素材/我的梦想_ en 1800 _ 1010 _ 01。 png ，静态/CK播放器/素材/我的梦想_ en 1800 _ 1010 _ 02。png ]，
比例：2
},
配置： ,//指定配置函数
调试：真，//是否开启调试模式
拖动："开始",//拖动的属性
seek: 0，//默认跳转的时间
//广告部分开始
广告前面：“http://w . CK球员。com/yytf/swf/front 001。swf，http://w . CK玩家。com/yytf/swf/front 002。 swf ，//前置广告
adfront时间：“15，15”，
adfrontlink: ，
广告暂停：“http://w . CK播放器。com/yytf/swf/pause 001。swf，http://w . CK玩家。com/yytf/swf/pause 002。主权财富基金，
adpausetime:"5，5 "，
adpauselink: ，
广告词：“http://w . CK球员”。com/yytf/swf/insert 001。swf，http://w . CK玩家。com/yytf/swf/insert 002。主权财富基金，
adinsertime: 10，10 ，
adinsertlink: ，
插入时间： 10,80 ,
阿德恩：“3358w . CK球员。com/yytf/swf/end 001。swf，http://w . CK玩家。com/yytf/swf/end 002。主权财富基金，
adend时间：“15，15”，
adendlink: ，
//广告部分结束
promptSpot: [ //提示点
{
单词： 提示点文字01,
时间：30
},
{
单词： 提示点文字02,
时间：150
}
],
视频：[
[ http://img。ksbbs。 com/asset/Mon _ 1703/05 cacb4 e 02 f 9d 9 e . MP4 ， video/mp4 ，中文标清, 0],
[ http://img。ksbbs。DDD第九季第五集。 MP4 ，视频/mp4 ，中文高清, 0],
[ http://img。ksbbs。com/asset/Mon _ 1703/EB 048d 7839442d 0。 MP4 ，视频/mp4 ，英文高清, 10],
[ http://img。ksbbs。com/asset/Mon _ 1703/d 30 e 02 a 5626 c 066。 MP4 ，视频/mp4 ，英文超清, 0]
]
};
//定义一个对象
var player=新CK播放器(视频对象)；
}
}
/脚本
样式范围
#视频{
宽度：600像素
高度：400像素
边距：0px自动；
}
/风格
总结：经检验，以上两种方法加载均需要闪光的支持，然而目前大众浏览器均已放弃闪光，所以建议使用下方流媒体视频流播放；
三、vue加载hls视频流
1.index.html中
添加：
脚本src= https://cdn。jsdelivr。net/NPM/HLS。js @ latest /脚本
2.video-player.vue文件
模板
div class=hls
视频id=视频静音/视频
/div
/模板
脚本
导出默认值{
名称：“hls-video”，
组件：{
},
data() {
返回{
视频：空，
hls:空
}
},
道具：{
选择标准信息：{
类型：对象，
必填：真
}
},
观察：{
//视频弹窗时如果弹窗已存在，重新加载视频流
选择标准信息。 mourl :function(oldV，newV){
如果(newV！=oldV){
this.initVideo()
}
}
},
已安装(){
this.initVideo()
},
销毁(){
this.reset()
},
方法：{
//组件销毁时，调用该方法，停止请求；分遣队和停止装载为流媒体官网方法
重置(){
这个。HLS。detachmedia(这个。视频)
this.hls.stopLoad()
},
//初始化录像
initVideo () {
这个。视频=文档。getelementbyid(视频)
//浏览器是否支持流媒体
if(Hls.isSupported()) {
//如果流媒体已存在，先清空
如果(this.hls){
this.reset()
}否则{
this.hls=新hls()
}
//this.selectStdInfo.mourl为父组件传给该子组件的视频全球资源定位器(统一资源定位器)
这个。HLS。loadsource(this。选择标准信息。摩尔)
这个。HLS。附加媒体(这。视频)
这个. Hls on(Hls .事件。MANIFEST_PARSED，()={
this.video.play()
});
} else if(视频。canplaytype( http://kbs-独岛。gscdn。com/独岛_ 300/_ definit _/独岛_ 300。流/播放列表。m3 u8 ){
//不支持hls，支持苹果原生
this.video.src=
这个。视频。addevent侦听器( loaded metadata ，function() {
this.video.play()
})
}
}
},
}
/脚本
样式范围的语言=scss 。hls{
宽度：100%;
身高：100%;
显示器：flex
对齐-项目：居中；
对齐-内容：居中；
#视频{
宽度：100%;
边距：0自动；
}
}
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。