收藏
回答

使用VideoContext.requestFullScreen iOS端全屏后左滑出现bug?

页面使用了VideoContext.requestFullScreen API使页面跳转到视频页面时自动打开,并自动播放。点击退出全屏时会使用bindfullscreenchange来触发函数,执行wx.navigateBack 跳回原来的页面。但现在在iOS端左滑时会直接退出全屏且不会跳转。而且退出全屏后视频组件会卡死。安卓端则没有问题,退出左滑或者右滑退出后会直接返回上一级页面。

即下图的情况

js

// pages/video_page/video_page.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    beginning:true// 是否初次进入
  },
     /**
   * 视频进入和退出全屏时触发
   */
  fullscreenChange(e){
    console.log(this.data.beginning)
    if(this.data.beginning){
      return
    }
    // console.log("退出全屏")
    // wx.navigateBack({
    //   delta: 1,
    // })
  },
  // 开始播放
  playVideo(){
    this.setData({
      beginning:false,
    })
    wx.hideLoading()
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.showLoading({
      title: '加载中',
    })
    // this.videoContext = wx.createVideoContext("video", this);
    // this.videoContext.requestFullScreen({ direction: 0 });
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

wxml

<view>
  <!-- 遮罩层 -->
  <view class="mask" wx:if="{{beginning}}"></view>
  <video 
  style="z-index:100"
  id="video"
  src="https://media.w3.org/2010/05/sintel/trailer.mp4"
  enable-auto-rotation="{{true}}"
  autoplay="{{true}}"
  bindfullscreenchange="fullscreenChange"
  bindplay="playVideo"
  >
  <view class="title">
    <view class="image-box">
      <image class="image" src="/public/img/temp-doc.jpg"></image>
    </view>
    <view class="doctor">
      <view class="name">
        <text>张三</text>
        <text>主治医师</text>
        <view class="iconfont iconlabel_01" style="font-size:26rpx;"></view>
      </view>
      <view class="hospital">
        <text style="font-size:26rpx;">南京市鼓楼医院</text>
      </view>
    </view>
  </view>
</video>
</view>

wxss

.title{
  position: fixed;
  bottom128rpx;
  color:#fff;
  left30rpx;
  display: flex;


  align-items: center;
}
/* 遮罩层 */
.mask{
  position: fixed;
  top:0;
  left0;
  right0;
  bottom0;
  background-color#000;
  z-index999;
}
.image{
  height96rpx;
  width96rpx;
  border-radius50%;
  margin-right30rpx;
  border:4rpx solid #fff;
}
.doctor{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height96rpx;
  line-height48rpx;
}
.name{
  height48rpx;
  display: flex;
}
.name text:nth-child(1){
  font-size:34rpx;
  font-weight550;
  margin-right14rpx;
}
.name text:nth-child(2){
  font-size26rpx;
  margin-right24rpx;
}


.hospital{
  height48rpx;
}
回答关注问题邀请回答
收藏

2 个回答

登录 后发表内容