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

本文介绍: 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>

原文地址:https://blog.csdn.net/T_ianxin/article/details/135996973

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_65433.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。