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-WEIXIN
                this.videoContext = uni.createLivePlayerContext('live-video');
                this.videoContext.requestFullScreen({
                    direction: 90
                });
                this.btnToggle = true;
                // #endif
            },
            // 退出全屏
            quitFullScreen() {
                // #ifdef APP-PLUS
                this.videoContext = uni.createVideoContext('myVideo');
                this.videoContext.exitFullScreen();
                this.btnToggle = false;
                // #endif
                // #ifdef MP-WEIXIN
                this.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>
相关推荐
清灵xmf24 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据30 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
说私域38 分钟前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
qq_3901617739 分钟前
防抖函数--应用场景及示例
前端·javascript
334554321 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js