<template>
<view class="content">
<view class="player-content">
<live-player id="livePlayer" class="live-player" catchtouchmove :src="currentUrl" autoplay
background-mute sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">
<view class="player-tool" :style="{bottom:(showControlbar?'0':'-60rpx')}">
<view class="tools">
<view class="full-screen" @tap.stop="handleFullScreen()">
<text class="iconfont" v-if="!fullScreenFlag">进入全屏</text>
<text class="iconfont" v-else></text>
</view>
<view class="cruise" @tap.stop="handleCruise()" v-if="streamIndex == 2">
<text class="iconfont">退出全屏</text>
</view>
</view>
</view>
</live-player>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isPlaySource: false, //是否有播放源
isVideoLive: false, //是否是直播
isAutoplay: true, //是否自动播放
videoMsg: '', //video消息
currentUrl: '', //播放路径
showControlbar: true,
timer:null,
}
},
watch: {
showControlbar(val, oldVal) {
if(val){
this.timer = setTimeout(()=>{
this.showControlbar = false
},5000)
}else{
clearTimeout(this.timer);
}
}
},
onLoad() {
this.playerCtx = uni.createLivePlayerContext('livePlayer');
},
created() {
this.getLiveList() //视频流列表
setTimeout(()=>{
this.showControlbar = false
},10000)
},
methods: {
handleControlbar() {
this.showControlbar = !this.showControlbar
},
getLiveList() {
this.$api.livePage.getLiveList().then(res => {
//业务逻辑
}).catch(err => {
console.log('err');
});
},
// 巡航
handleCruise() {
// #ifdef MP-WEIXIN
uni.vibrateShort();
// #endif
},
//全屏功能的实现
handleFullScreen() {
var that = this
if (!that.fullScreenFlag) {
//全屏
that.playerCtx.requestFullScreen({
success: res => {
that.fullScreenFlag = true
console.log('我要执行了');
},
fail: res => {
console.log('fullscreen fail');
},
direction: 90
});
} else {
//缩小
that.playerCtx.exitFullScreen({
success: res => {
that.fullScreenFlag = false
console.log('我要执行了');
},
fail: res => {
console.log('exit fullscreen success');
}
});
}
},
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.player-content {
position: relative;
width: 100%;
height: 450rpx;
display: flex;
background-size: 100% 100%;
.live-player {
width: 100%;
height: 100%;
position: relative;
}
}
}
//播放器弹出工具
.player-tool {
width: 100%;
height: 60rpx;
background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
left: 0;
padding: 0 45rpx;
transition: all 0.3s;
.tools {
height: 100%;
width: auto;
display: flex;
align-items: center;
.full-screen {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
color: #fff;
font-weight: bold;
}
}
.cruise {
display: flex;
align-items: center;
justify-content: center;
margin-left: 25rpx;
.iconfont {
color: #E45A3E;
font-size: 45rpx;
}
}
}
}
</style>
控制台可能会报黄色警告提示 background-mute 已经过时,删掉即可.
属性:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | String | - | 用于音视频下行的播放 URL，支持 RTMP、FLV 等协议 |
| mode | String | live | 模式。live（直播），RTC（实时通话，该模式时延更低） |
| autoplay | Boolean | false | 是否自动播放 |
| muted | Boolean | false | 是否静音 |
| orientation | String | vertical | vertical（垂直），horizontal（水平） |
| object-fit | String | contain | 填充模式，可选值有?contain（图像长边填满屏幕，短边区域会被填充??），fillCrop（图像铺满屏幕，超出显示区域的部分将被截掉） |
| background-mute | Boolean | false | 当微信切到后台时，是否关闭播放声音 |
| min-cache | Number | 1 | 最小缓冲延迟， 单位：秒 |
| max-cache | Number | 3 | 最大缓冲延迟， 单位：秒 |
| sound-mode | String | speaker | 声音输出方式。speaker（扬声器），ear(听筒) |
| auto-pause-if-navigate | Boolean | true | 当跳转到本小程序的其他页面时，是否自动暂停本页面的实时音视频播放 |
| auto-pause-if-open-native | Boolean | true | 当跳转到其它微信原生页面时，是否自动暂停本页面的实时音视频播放 |
| picture-in-picture-mode | string/Array | - | 设置小窗模式： push, pop 或通过数组形式设置多种模式（如： ["push", "pop"]）（不常用） |
| bindstatechange | EventHandler | - | 用于指定一个 javascript 函数来接受播放器事件.detail = {code} |
| bindfullscreenchange | EventHandler | - | 用于指定一个 javascript 函数来接受全屏变化事件，detail = {direction, fullScreen} |
| bindnetstatus | EventHandler | - | 网络状态通知，detail = {info} |
| bindaudiovolumenotify | EventHandler | - | 播放音量大小通知，detail = {}（不常用） |
| debug | Boolean | false | 是否开启调试模式 |