水泥钉
水泥钉
  • 发布:2023-08-08 21:25
  • 更新:2024-08-21 17:20
  • 阅读:465

【报Bug】video 小程序 黑屏 及全屏bug

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows11

HBuilderX类型: 正式

HBuilderX版本号: 3.8.7

第三方开发者工具版本号: 1.06.2306020

基础库版本号: 3.0.0

项目创建方式: HBuilderX

示例代码:
        <view v-if="isPlay">  
                    <image  
                        class="poster-image"  
                        :src="courseList.video[playIndex].img"  
                        mode="aspectFill"  
                    ></image>  
                    <!-- 封面图-->  
                    <view  
                        class="poster gui-flex gui-align-items-center gui-justify-content-center"  
                    >  
                        <text @click="palys()" class="gui-icons"></text>  
                    </view>  
                    <!--播放图标-->  
                </view>  
        <video  
                    @tap="handlePay"  
                    show-casting-button  
                    v-show="isPlay == false"  
                    id="myVideo"  
                    :show-center-play-btn="false"  
                    class="gui-course-video"  
                    @fullscreenchange="fullscreenchange"  
                    :src="courseList.video[playIndex].url"  
                    controls  
                ></video>  
    this.videoContext = uni.createVideoContext("myVideo", this);  
        fullscreenchange(e) {  
            const isFullScreen = e.detail.fullScreen;  
            if (isFullScreen) {  
                this.isPlay = false;  
                this.videoContext.requestFullScreen({ direction: 90 });  
                this.videoContext.play();  
                console.log("video进入全屏11");  
                console.log(this.isPlay, "--console.log(    this.isPlay )");  
                console.log(this.videoContext, "this.videoContext");  
            } else {  
                console.log("video退出全屏");  
                console.log(this.videoContext, "this.videoContext");  
            }  
        },  
        handlePay() {  
            if (this.isPlay) {  
                this.videoContext.play();  
            } else {  
                this.videoContext.exitFullScreen();  
                this.videoContext.pause();  
            }  
            this.isPlay = !this.isPlay;  
        },  
        async palys() {  
            this.isPlay = false;  
            await this.videoContext.play();  
        },  

操作步骤:

点击播放 点击全屏

预期结果:

和app 效果一样

bug描述:

<video 标签 播放视频
1.在开发者工具中 黑屏但有声音 打包后就没有问题了 为什么??也查过视频格式及编码问题!
2.给video 添加tap 事件 达到点击屏幕播放/暂停 app没问题 但是小程序中发现 tap事件与点击全屏按钮 纯在冲突!!会导致整个界面旋转90度

2023-08-08 21:25 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

我是无法全屏

要回复问题请先登录注册