注册 登录
1***@qq.com
1***@qq.com
  • 发布：2023-11-21 22:46
  • 更新：2023-11-22 11:59
  • 阅读：206

【报Bug】vue3模式下uni.createLivePlayerContext is not a function

分类：uni-app

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win11

HBuilderX类型： 正式

HBuilderX版本号： 3.8.12

手机系统： Android

手机系统版本号： Android 11

手机厂商： 小米

手机机型： 小米10

页面类型： vue

vue版本： vue3

打包方式： 云端

项目创建方式： HBuilderX

操作步骤：

<template>
<view class="content">
<view class="player-content"> 

        <live-player id="livePlayer" ref='livePlayer' class="live-player" catchtouchmove :src="sourceUrl" autoplay  
            background-mute sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">  
            <view class="player-tool" style="bottom:-60rpx">  
                <view class="tools">  
                    ghjgj  
                </view>  
            </view>  
        </live-player>  

    </view>  
</view>

</template>

<script setup>
import {
ref
} from "vue" 

uni.createLivePlayerContext("livePlayer")

</script>

<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column; 

    .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: space-between;  
    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;  
            }  
        }  
    }  

}

</style>

预期结果：

<template>
<view class="content">
<view class="player-content"> 

        <live-player id="livePlayer" ref='livePlayer' class="live-player" catchtouchmove :src="sourceUrl" autoplay  
            background-mute sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">  
            <view class="player-tool" style="bottom:-60rpx">  
                <view class="tools">  
                    ghjgj  
                </view>  
            </view>  
        </live-player>  

    </view>  
</view>

</template>

<script setup>
import {
ref
} from "vue" 

uni.createLivePlayerContext("livePlayer")

</script>

<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column; 

    .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: space-between;  
    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;  
            }  
        }  
    }  

}

</style>

实际结果：

<template>
<view class="content">
<view class="player-content"> 

        <live-player id="livePlayer" ref='livePlayer' class="live-player" catchtouchmove :src="sourceUrl" autoplay  
            background-mute sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">  
            <view class="player-tool" style="bottom:-60rpx">  
                <view class="tools">  
                    ghjgj  
                </view>  
            </view>  
        </live-player>  

    </view>  
</view>

</template>

<script setup>
import {
ref
} from "vue" 

uni.createLivePlayerContext("livePlayer")

</script>

<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column; 

    .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: space-between;  
    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;  
            }  
        }  
    }  

}

</style>

bug描述：

vue3模式下uni.createLivePlayerContext is not a function

2023-11-21 22:46 负责人:无 分享

没有找到相关结果

    已邀请:
    套马杆的套子

    套马杆的套子 - 没有解决不了的问题，只有解决不完的问题

    刚测试了下，微信小程序没问题

    <live-player  
            id="liveplayer"  
            src="https://domain/pull_stream"  
            mode="live"  
            :autoplay="true"  
            orientation="vertical"  
            object-fit="fillCrop"  
            @statechange="statechange"  
            @error="error"  
        >  
        </live-player>
    fgffffff(){  
                let player = uni.createLivePlayerContext('liveplayer', this);  
                console.log('aaaa',player);  

            },
    2023-11-22 09:01 分享
    YUANRJ

    YUANRJ

    app端不支持，参考文档

    2023-11-22 11:59 分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报