收藏
回答

video 小程序 黑屏 及全屏bug 同层渲染 异步事件

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug video 微信iOS客户端 8.0037 3.0.0
    <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();  
        },  

1.在开发者工具中 黑屏但有声音 打包后就没有问题了 为什么??也查过视频格式及编码问题!

2.给video 添加tap 事件 达到点击屏幕播放/暂停 app没问题 但是小程序中发现 tap事件与点击全屏按钮 纯在冲突!!如果不处理fullscreenchange

会导致整个界面旋转90度

3.通过处理fullscreenchange事件处理发现 点击全屏也触发了点击事件  虽然通fullscreenchange设置视频组件显示及播放可以解决页面被旋转90度的问题  但是体验不好会闪一哈 

4.排查事件 层级关系(怀疑是节点直接的层级关系导致的) 时发现开发者工具无法显示video的内部节点 无法查看

微信开发者工具:(没有找到显示 shadow-root开关)

谷歌浏览器:

回答关注问题邀请回答
收藏
登录 后发表内容