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>
相关推荐
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^3 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
拉不动的猪6 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
烛阴6 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中6 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
鱼樱前端7 小时前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
yzhSWJ8 小时前
Spring Boot中自定义404异常处理问题学习笔记
java·javascript
zyk_52010 小时前
前端渲染pdf文件解决方案-pdf.js
前端·javascript·pdf
沉迷...10 小时前
手动实现legend 与 echarts图交互 通过js事件实现图标某项的高亮 显示与隐藏
前端·javascript·echarts
皮实的芒果11 小时前
前端实时通信方案对比:WebSocket vs SSE vs setInterval 轮询
前端·javascript·性能优化