版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
vue项目中实现直播功能同时具备弹幕和聊天室功能
一、vue中实现直播功能
1.首先，需要知道直播的常用协议，RTMP 和 HLS，我这边采用的直播流为HLS。下面就是对播放选取，做过 H5 播放器的对与 video.js 并不陌生，实现的出发点也是在 video.js 上，默认大家都有 Vue 搭建和简单运用能力了，这里对video.js不做详细介绍，ok下面来进行实现直播。先来看一下页面的效果图。
2.涉及到视频顾名思义就需要播放器，这里选用的是vue-video-player（底层还是依赖 video.js），上面图中的测试直播流是cctv6。
(1)安装依赖
npm install vue-video-player --save
(2)在main.js中引入
// vue-video-player
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
import 'videojs-contrib-hls' //单是 RTMP 的话不需要第三方库，如果是 HLS 的话需要引入videojs-contrib-hls，看具体情况而定。
Vue.use(VideoPlayer);
(3)下面就可以在组件中直接去使用这个播放器了
<template>
<div class="player">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
>
</video-player>
</div>
</template>
<script>
export default {
name: 'Play',
data () {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: true, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
withCredentials: false,
type: "application/x-mpegURL", //播放类型，如果为rtmp配置为rtmp/mp4
src: "http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8" //直播流地址
}],
poster: "poster.jpg", //你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
},
}
}
二、vue项目中直播功能添加弹幕
（1）vue能实现弹幕功能的插件有很多（如：barrage，vue-baberrage），这里我选用的是第二种官方帮助文档。由于项目需求是聊天内容飘弹幕，所以弹幕的实现需要配合websocket，这篇内容先不介绍聊天室的实现，这里的介绍暂且按照官方提供的，只是简单实现弹幕没有融入到通讯功能里，换句话说就是你发的弹幕只有你自己可见emmm，后面一篇文章中更新websocket，将弹幕融入到通讯。所以老套路还是先安装：
npm i vue-baberrage
(2)在main,js中引入
//涉及到源码样式要更改所以这里静态引入
import vueBaberrage from '../static/vue-baberrage'
Vue.use(vueBaberrage);
//不需要更改源码样式的话
import { vueBaberrage } from 'vue-baberrage'
Vue.use(vueBaberrage);
(3)在组件中使用弹幕
Template
<div class="danmu">
<vue-baberrage
:isShow= "barrageIsShow"
:barrageList = "barrageList"
:loop = "barrageLoop"
>
</vue-baberrage>
</div>
Script
import { MESSAGE_TYPE } from 'vue-baberrage'
export default {
name: 'app',
data () {
return {
msg: 'Hello vue-baberrage',
barrageIsShow: true,
currentId : 0,
barrageLoop: false,
barrageList: []
}
},
methods:{
addToList (){
this.barrageList.push({
id: ++this.currentId,
avatar: "./static/avatar.jpg",
msg: this.msg,
time: 5,
type: MESSAGE_TYPE.NORMAL
});
...
参数说明
isShow
- Default: `true`
- Acceptable-Values: Boolean
- Function: This is the switch that if barrage is displayed.
barrageList
- Default: `[]`
- Acceptable-Values: Array
- Function: The is the container for managing the all barrage messages.
boxWidth
- Default: `parent's Width`
- Acceptable-Values: Number
- Function: Determine the width of the stage.
boxHeight
- Default: `window's Height`
- Acceptable-Values: Number
- Function: Determine the height of the stage.
messageHeight
- Default: `message's Height`
- Acceptable-Values: Number
- Function: Determine the height of the message.
maxWordCount
- Default: 60
- Acceptable-Values: Number
- Function: Determine the word count of the message.
loop
- Default: `false`
- Acceptable-Values: Boolean
- Function: Loop or not.
throttleGap
- Default: 2000
- Acceptable-Values: Number
- Function: The gap time between the message
Barrage Message Options
id
- Default: `null`
- Acceptable-Values: Number
- Function: For distinguish with other barrage messages.
avatar
- Default: `#`
- Acceptable-Values: String
- Function: Show the avatar of the barrage message.
msg
- Default: `null`
- Acceptable-Values: String
- Function: The content of the barrage message.
barrageStyle
- Default: `normal`
- Acceptable-Values: String
- Function: the css class name of the barrage message.
time
- Default: `10`
- Acceptable-Values: Number
- Function: How long does the barrage message show.(Seconds)
type
- Default: MESSAGE_TYPE.NORMAL
- Acceptable-Values: Symbol
- Function: The type of the barrage message.
MESSAGE_TYPE.NORMAL for scroll from right to left.
MESSAGE_TYPE.FROM_TOP for fixed on the top of the stage.
websocket与弹幕配合使用，点击进入查看
本博客为原厂加工生产，转载请注明出处，谢谢