vue2 + vue-video-player实现直播拉流HSL m3u8格式视频播放

名词释义:直播推流、拉流

简单来讲:拉流是从服务器获取视频,推流是将视频推送服务器。

推流:

推流,指的是把采集阶段封包好的内容传输到服务器的过程。其实就是将现场的视频信号传到网络的过程。“推流”对网络要求比较高,如果网络不稳定,直播效果就会很差,观众观看直播时就会发生卡顿等现象,观看体验很是糟糕。
推流主流推送协议分三种:
RTMP
RTMP是Adobe公司为Flash/AIR平台和服务器之间音、视频及数据传输开发的实时消息传送协议。多以flv格式封包。RTMP是目前最主流的流媒体传输协议,对CDN支持良好,实现难度较低,是大多数的直播平台的选择。

RTMP的不足——不支持浏览器,且Adobe已不再更新。直播服务要支持浏览器的话,需要另外的推送协议支持。

HLS
HLS是由Apple公司定义的基于HTTP的流媒体实时传输协议。它的原理是将整个流分为多个小的文件来下载,每次只下载若干个。HLS是以点播的技术实现了直播的体验。因为每个小文件的时长很短,客户端可以很快地切换码率,以适应不同带宽条件下的播放。

分段推送的技术特点,决定了HLS的延迟一般会高于普通的流媒体直播协议。传输内容包括两部分:一是M3U8描述文件,二是TS媒体文件。
WebRTC
WebRTC是一个支持浏览器进行实时语音、视频对话的开源协议。WebRTC的支持者甚多,Google、Mozilla、Opera推动其成为W3C推荐标准。

拉流:

拉流是指服务器已有直播内容,根据协议类型(如RTMP、RTP、RTSP、HTTP等),与服务器建立连接并接收数据,进行拉取的过程。拉流端的核心处理在播放器端的解码和渲染,在互动直播中还需集成聊天室、点赞和礼物系统等功能。

推流和拉流的区别?

用户最终看到一条直播视频,可能会通过两种方式达成,一种是主动把内容传输到服务器,缓存在边缘节点,终端用户随时可以调取观看,这是推流;一种是当终端用户想要看某个内容时,将内容从源站调取,并缓存到边缘节点,这是拉流。

vue-video-player

1
2
3
4
5
6
7
8
9
10
11
//安装依赖
npm install vue-video-player --save
//播放HLS协议视频(*.m3u8)需要额外依赖
npm install videojs-contrib-hls --save
//样式'video.js/dist/video-js.css'需要依赖video.js
npm install video.js --save
//package.json内dependencies的video相关
"video.js": "^6.8.0",
"videojs-contrib-hls": "^5.14.1",
"vue-video-player": "^5.0.2",

全局引用方式:

1
2
3
4
//main.js
import VideoPlayer from 'vue-video-player'
import 'videojs-contrib-hls'
Vue.use(VideoPlayer)

component内引用方式:

1
2
3
4
5
6
7
8
9
10
11
//player.vue
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-contrib-hls'
//components
components: {
videoPlayer
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//template
<video-player
class="video-player vjs-custom-skin"
:options="playerOptions"
></video-player>
//data
playerOptions: {
controls: true,
autoplay: true, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
language: 'zh-CN',
playbackRates: [0.7, 1.0, 1.5, 2.0],
aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
sources: [{
type: "application/x-mpegURL",
src: "http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8",
withCredentials: false
}],
notSupportedMessage: '此视频暂无法播放,请稍后再试!', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
}

Tips:关于本地localhost视频可播放,编译后在服务器上报错的bug,vue-video-player上有issue提到,可点此查看