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>
相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper8 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳9 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱9 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
绅士玖9 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀9 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴9 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
拾光拾趣录10 小时前
JavaScript屏幕切换检测方案
前端·javascript