收藏
回答

使用swiper嵌套video组件,打开全屏能正常显示,退出全屏导致下一个swiper的vide错位

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug swiper、video、"pageOrientation": "auto" 微信iOS客户端 最新 3.8

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)
  }
})

回答关注问题邀请回答
收藏

2 个回答

  • enthusiasm
    enthusiasm
    04-24

    可以提供复现完整demo

    04-24
    有用 1
    回复
  • optimistic
    optimistic
    04-24

    建议swiper只存在一个video,非当前current用封面替代,小程序多个video会有很多bug

    04-24
    有用
    回复 3
    • enthusiasm
      enthusiasm
      04-24
      是的,目前确实遇到很多问题。你说的封面代替是只video的poster属性,还是直接return一个image,不加载video组件》
      04-24
      回复
    • optimistic
      optimistic
      04-25回复enthusiasm
      不加载video,仅渲染一个img
      04-25
      回复
    • enthusiasm
      enthusiasm
      05-07回复optimistic
      OK
      05-07
      回复
登录 后发表内容