「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」
hello，大家好，最近半个月没有更新文章了（忙着写代码了），这两天在写直播那块的时候，发现网上很多插件比如dplayer、vue-video-player、flv.js、video.js等等，都不能在实际项目中很好的用到，要么是浏览器早已经废除的原因，要么是报错得不到解决，好像大家写出来自己的文章，并不关心到底能不能用，像复制粘贴一样，从官方的或者非官方的地方复制过去，一片片文章大同小异，可能是我太菜了，不会实际运用吧。
今天记录一下我用到的这个插件：
安装
我是在vue中使用的，所以安装是直接npm install xgplayer。
组件代码
新建组件videoPlayer.vue，组件代码：
<template>
<div class>
<div ref="video" id="mmid"></div>
<div class="barrage-box">
<div class="b-text">弹幕</div>
<div class="input-box">
<el-input placeholder="请输入内容" v-model="barrageValue">
<template slot="append">
|
<span @click="save()">发送</span>
</template>
</el-input>
</div>
</div>
</div>
</template>
<script>
import Player from 'xgplayer';
import FlvPlayer from 'xgplayer-flv'; // flv格式
import HlsJsPlayer from 'xgplayer-hls.js'; // M3U8格式
export default {
data() {
return {
videoPlayer: null,
barrageValue: ''
};
},
props: {
cover: '', // 直播封面图
videoSrc:''
},
mounted() {
this.getVideo();
},
methods: {
getVideo() {
this.$nextTick(() => {
console.log(this.videoSrc);
this.videoPlayer = new FlvPlayer({
el: document.querySelector('#mmid'),
url: this.videoSrc,
width: '100%',
height: '714px',
volume: 0.6, // 初始音量
autoplay: false, // 自动播放
playsinline: true,
isLive: true,
cors: true,
poster: this.cover, // 封面图
playbackRate: [0.5, 0.75, 1, 1.5, 2], // 倍速展示
defaultPlaybackRate: 1,
danmu: {
panel: true,
comments: [
//弹幕数组
{
duration: 15000, //弹幕持续显示时间,毫秒(最低为5000毫秒)
id: '1', //弹幕id，需唯一
start: 3000, //弹幕出现时间，毫秒
prior: true, //该条弹幕优先显示，默认false
color: true, //该条弹幕为彩色弹幕，默认false
txt: '', //弹幕文字内容
mode: 'top' //显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll
}
],
area: {
//弹幕显示区域
start: 0, //区域顶部到播放器顶部所占播放器高度的比例
end: 1 //区域底部到播放器顶部所占播放器高度的比例
},
closeDefaultBtn: false, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
defaultOff: true //开启此项后弹幕不会初始化，默认初始化弹幕
}
});
});
},
// 发送弹幕
save() {
if (this.barrageValue) {
let id = 0;
this.videoPlayer.danmu.sendComment({
//发送弹幕
duration: 15000,
id: 'chat' + id++,
txt: this.barrageValue,
style: {
color: '#ffffff',
fontSize: '18px',
// border: '1px solid #ff9500',
borderRadius: '50px',
padding: '5px 12px',
backgroundColor: 'rgba(255, 255, 255, 0.1)'
}
});
}
}
}
};
</script>
<style lang="scss" scoped>
.barrage-box {
display: flex;
align-items: center;
padding: 28px 44px;
margin-bottom: 26px;
background-color: #282828;
.b-text {
position: relative;
width: 88px;
height: 40px;
padding-left: 32px;
margin-right: 40px;
font-size: 18px;
color: #f1a475;
line-height: 40px;
border-radius: 23px;
border: 1px solid #f1a475;
&::before {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
width: 9px;
height: 9px;
background: #f1a475;
border-radius: 50%;
content: '';
}
}
.input-box {
width: 48%;
background: #171616;
border-radius: 28px;
span {
padding-left: 14px;
&:hover {
color: #ffffff;
}
}
}
}
/deep/ {
.el-input__inner {
border-color: transparent;
background-color: transparent;
}
.el-input-group__append {
padding-right: 30px;
border-color: transparent;
background-color: transparent;
cursor: pointer;
}
}
</style>
部分关键字段解释
cover：直播封面图，大家可根据需求自行删减；videoSrc：直播链接地址，后端会返回一个推流的地址给前端这边，这时候一定要问清楚这个地址的格式是什么样的，这次我在联调的时候，因为是第一次写直播功能，后端返回的rtmp格式的，导致一直不能播放，后来询问，发现后端那边是可以根据前端想要的格式返回的，正常的有flv格式的和M3U8格式的，在组件中，我们根据不同的格式进行不同的写法：- 播放 m3u8 需要安装
npm install --save xgplayer-hls.js，在组件中就要引入import HlsJsPlayer from 'xgplayer-hls.js'; // M3U8格式
-
播放flv格式的需要安装
npm install --save xgplayer-flv，在组件中就要引入import FlvPlayer from 'xgplayer-flv'; // flv格式 -
直播中弹幕的功能我是自己写的输入框去发送弹幕的，可以在官方文档中根据字段配置自己想要的样式
- 组件的引用我就不贴代码， 想必应该都会引用组件并传值。
写在最后
还有什么不懂的可以来问我，或者看看官方文档。
