可以提供复现完整demo
使用swiper嵌套video组件,打开全屏能正常显示,退出全屏导致下一个swiper的vide错位swiper组件嵌套video组件滑动展示,页面开启了"pageOrientation": "auto"允许屏幕旋转; 正常旋转没问题,旋转了之后切换swpier也没问题; 但是在竖屏状态点击某一个video全屏横屏展示之后,再保持横屏状态切换swpier组件,下一个video会错位; 没有响应"pageOrientation": "auto"屏幕旋转,或者响应异常? 最小复现demo index.wxml <view class="page-body"> <view class="page-section tc"> <swiper class="swiper-container"> <swiper-item wx:key="1" class="swiper-item"> <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video> </swiper-item> <swiper-item wx:key="2"> <video id="myVideo2" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video> </swiper-item> </swiper> <!-- <view class="weui-cells"> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label">弹幕内容</view> </view> <view class="weui-cell__bd"> <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" /> </view> </view> </view> --> <view class="btn-area"> <!-- <button bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button> <button bindtap="bindPlay" class="page-body-button" type="primary">播放</button> <button bindtap="bindPause" class="page-body-button" type="primary">暂停</button> --> <button bindtap="fullscreen" class="page-body-button" type="primary">全屏</button> </view> </view> </view> index.wxss @import "../lib/weui.wxss"; .weui-cells { margin-top: 80rpx; text-align: left; } .weui-label { width: 5em; } .page-body-button { margin-bottom: 30rpx; } .page-section { /* position: fixed; left: 0; right: 0; top: 0; bottom: 0; */ width: 100vw; height: 100vh; } .swiper-container { width: 100%; height: 100%; } .swiper-item { } .page-section video { width: 100vw; height: 100vh; } .btn-area { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; } index.json { "pageOrientation": "auto", "navigationStyle": "custom" } index.js function getRandomColor () { const rgb = [] for (let i = 0 ; i < 3; ++i){ let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color rgb.push(color) } return '#' + rgb.join('') } Page({ onReady: function (res) { this.videoContext = wx.createVideoContext('myVideo') }, inputValue: '', data: { src: '', danmuList: [{ text: '第 1s 出现的弹幕', color: '#ff0000', time: 1 }, { text: '第 3s 出现的弹幕', color: '#ff00ff', time: 3 }] }, bindInputBlur: function(e) { this.inputValue = e.detail.value }, bindSendDanmu: function () { this.videoContext.sendDanmu({ text: this.inputValue, color: getRandomColor() }) }, bindPlay: function() { this.videoContext.play() }, bindPause: function() { this.videoContext.pause() }, fullscreen: function() { console.log('fullscreen') this.videoContext.requestFullScreen({direction: 90}) }, videoErrorCallback: function(e) { console.log('视频错误信息:') console.log(e.detail.errMsg) } })
04-24已解决了,官方最小示例能触发方法,排查出我目前代码video父组件绑定了点击方法导致video内部自定义组件方法不触发,移除父组件方法,绑定到video上,之后video内部自定义组件方法就能触发了
video组件全屏模式下,写在video内的组件能正常展示出来,但是点击没法触发方法?video组件全屏模式下,写在video内的组件能正常展示出来,但是点击没法触发方法? 目前需要完全自定义video组件的进度条等各种样式,因此隐藏了video默认的样式,自定义的全屏按钮,点击全屏之后,进入全屏模式,但是退出全屏按钮点击方法不生效
04-24