uniapp小程序实现直播组件live-player全屏问题

实现效果：
在这里插入图片描述

代码：

<template><view class="player-content"><!-- #ifdef APP-PLUS --><video id="myVideo" :src="srcLink" autoplay controls><!-- 打开全屏 --><image class="img img-f" v-if="btnToggle == false" @click="fullScreen" src="/static/my/fullScreen.png" mode=""></image><!-- 退出全屏 --><image class="img img-q" v-else @click="quitFullScreen" src="/static/my/quitFullScreen.png" mode=""></image></video><!-- #endif --><!-- #ifdef MP-WEIXIN --><live-player id="live-video" :src="srcLink" autoplay class="live-player"><!-- 打开全屏 --><cover-image class="img img-f" v-if="btnToggle == false" @click="fullScreen" src="/static/my/fullScreen.png" mode=""></cover-image><!-- 退出全屏 --><cover-image class="img img-q" v-else @click="quitFullScreen" src="/static/my/quitFullScreen.png" mode=""></cover-image></live-player><!-- #endif --></view>
</template>
<script>export default {data() {return {srcLink: "",showControlbar: true,timer: null,btnToggle: false}},onLoad(option) {this.srcLink = option.id;wx.getVideoInfo({src: this.srcLink,success(res) {console.log(res)}})},watch: {showControlbar(val, oldVal) {if (val) {this.timer = setTimeout(() => {this.showControlbar = false;}, 5000)} else {clearTimeout(this.timer);}}},created() {},methods: {// 进入全屏fullScreen() {// #ifdef APP-PLUS this.videoContext = uni.createVideoContext('myVideo');this.videoContext.requestFullScreen();this.btnToggle = true;// #endif// #ifdef MP-WEIXINthis.videoContext = uni.createLivePlayerContext('live-video');this.videoContext.requestFullScreen({direction: 90});this.btnToggle = true;// #endif},// 退出全屏quitFullScreen() {// #ifdef APP-PLUSthis.videoContext = uni.createVideoContext('myVideo');this.videoContext.exitFullScreen();this.btnToggle = false;// #endif// #ifdef MP-WEIXINthis.videoContext = uni.createLivePlayerContext('live-video');this.videoContext.exitFullScreen();this.btnToggle = false;// #endif},}}
</script><style lang="scss" scoped>.img{width: 52rpx;height: 52rpx;position: absolute;}.img-f{bottom: 32rpx;right: 32rpx;}.img-q{bottom: 32rpx;right: 96rpx;}.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: flex-end;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;}}}}.btn-toggle {color: red;}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/670813.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！