一、Web端实现
Web端是vue2，用的是LiveQing，支持多种格式视频播放（我这里测试的m3u8和rtmp格式），可以去官网（https://www.liveqing.com/docs/download/LiveQing.html）看。
首先安装插件
npm install --save @liveqing/liveplayer
然后在vue.config.js里面加上如下内容：
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{
from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
{
from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
{
from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}
])
]
}
}
如果上面的方法不起作用的话，可以把上面三个文件crossdomain.xml、liveplayer.swf、liveplayer-lib.min.js 丢到public目录
然后在页面上增加播放控制，具体代码如下：
<template>
<div class="page-container">
<LivePlayer
ref="livePlayer"
:video-title="obj.title"
:videoUrl="obj.videoUrl"
@snapOutside="snapOutside"
@ended="ended"
fluent
:autoplay="autoplay"
live
stretch
:poster="obj.pictures"
/>
</div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
export default {
name: 'Dir',
components: {
LivePlayer
},
data() {
autoplay: true,
obj:{
},
},
methods:{
getData(){
// 访问后台获取视频直播详情
this.$http.get(url).then(res=>{
this.obj = res.data
})
},
pause: function () {
this.$refs.livePlayer.pause();
},
play: function () {
this.$refs.livePlayer.play();
},
ended: function () {
console.info('ended......')
},
snap: function () {
this.$refs.livePlayer.snap();
},
snapOutside: function (snapData) {
console.info(snapData)
}
},
mounted() {
this.$nextTick(() => {
//获取视频直播详情
this.getData()
})
}
}
</script>
以上就是Web端视频直播的实现了
二、小程序端
小程序用的框架是美团的mpvue，但无法使用LiveQing这种靠操作DOM实现的方式来完成。最后是使用了小程序官方的live-player，可点击这里查看官方文档。目前仅支持 flv, rtmp 格式视频流。
需要注意的是在模拟器无法播放，模拟器上会呈现黑屏，只能在真机上调试
首先需要在公众号平台上开通音视频直播能力，
再把后台接口地址、视频直播地址域名添加到微信的域名信息设置。
具体代码如下：
<template >
<div class="page-detail">
<live-player style="width:100%;225px;" catchtouchmove :src="obj.videoUrl" mode="live" autoplay bindstatechange="statechange" binderror="error" bindfullscreenchange="fullscreenchangemethod" id="player" />
</div>
</template>
<script>
export default {
data() {
return {
obj:{
},
moduleName:'LiveVideo',
player: null
}
},
onLoad(option){
var that = this;
that.player = wx.createLivePlayerContext("player");
that.getData();
},
methods: {
statechange(e) {
console.log('live-player code:', e.detail.code)
},
error(e) {
console.error('live-player error:', e.detail.errMsg)
},
isExsit(res) {
if (res != null && res != '' && res != 'null') {
return true
}
return false
},
getData(){
var that = this;
wx.request({
url: _url, //后台获取视频直播详情地址
method: 'GET', //方法POST、PUT、DELETE、GET
header: {
//请求头
'content-type': 'application/json',
'Authorization': that.globalData.token
},
success(res){
that.obj = res.data.data
}
})
},
}
}
</script>
