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>
相关推荐
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
中云DDoS CC防护蔡蔡2 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
小曲曲3 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS5 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
井眼6 小时前
微信小程序-prettier 格式化
微信小程序·小程序
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow7 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o7 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app