vue加载视频流,实现直播功能的过程

前言

最近在项目中有一个播放监控站点图像视频的功能（类似与直播），然后对此进行了一个记录与总结！

在此功能中，后台本来给的是rtmp格式的视频流，后在网上找了几种方式，发现rtmp视频流需要使用flash播放器，然而各大主流浏览器已经放弃flash，因此最后又改用hls格式的视频流，最终完成这个功能！（如果只是想要成功的代码，请直接看：三、vue加载hls视频流）

一、视频流是什么？

• 视频流：视频流其实就是流媒体（streaming media），是指将一连串数据压缩后，经过网络分段发送，即时传输以供观看音视频的一种技术。监控、直播等实时播放的功能一般都使用的是流媒体。
• 流媒体协议：流媒体协议是一种标准化的传递方法，用于将视频分解为多个块，将其发送给视频播放器，播放器重新组合播放，常见的有rtmp、hls、hds、mss、MPEG-DASH等。
• 视频格式（format）：视频格式指视频文件格式（container format）。常见 container format 包括 .mp4、.m4v、.avi、.mov等。

三种定义在这里不做过多赘述，有想深入了解的小伙伴可以自己再去了解一下；rtmp视频流实际上就是以rtmp流媒体协议生成的流媒体；hls视频流同理（这个视频流的格式一般由后台进行控制）

二、vue加载rtmp视频流

1.方法一：video.js

npm install --save vue-video-player npm install --save videojs-flash 

2.方法二：ckplayer

因为本人已经尝试过由于flash原因不可用，所以已经都删掉了，没有部分截图，就文字描述一下，感兴趣的小伙伴可以自己搜一下。

• 第一步：官网下载ckplayer
• 第二步：将下载好的文件夹解压后放到项目中的static(静态资源文件夹)下
• 第三步：在index.html中对应引入ckplayer.js文件
• 第四步：创建播放视频的vue文件，代码如下： 

总结：经检验，以上两种方法加载均需要flash的支持，然而目前大众浏览器均已放弃flash，所以建议使用下方hls视频流播放；

三、vue加载hls视频流

1.index.html中

添加：

2.video-player.vue文件

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。