uniapp开发小程序使用live-player添加控件
2023-12-16 11:39:47
<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>
文章来源:https://blog.csdn.net/m0_67021283/article/details/135030175
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!