老师,关于VideoContext.requestFullScreen API在iOS端的问题

来源:10-1 课程回顾

Raymond0913

2021-05-15

一个视频播放页面,使用了VideoContext.requestFullScreen 这个api 让页面跳转过来时就自动全屏打开,然后自动播放。点击退出全屏按钮后在 bindfullscreenchange 对应的函数中使用wx.navigateBack 跳转会上一级页面。
在安卓端实现正常,但在ios端,左滑退出就会直接退出到页面。即关闭了全屏。但没有跳转。且video组件卡死。在网上找不到类似的帖子,不知道如何解决,希望老师能给一些意见。
如图为ios左滑后的退出全屏且跳转不生效后的页面
图片描述

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>

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

wxss

/* pages/video_page/video_page.wxss */
.title{
  position: fixed;
  bottom: 128rpx;
  color:#fff;
  left: 30rpx;
  display: flex;

  align-items: center;
}
/* 遮罩层 */
.mask{
  position: fixed;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 999;
}
.image{
  height: 96rpx;
  width: 96rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  border:4rpx solid #fff;
}
.doctor{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 96rpx;
  line-height: 48rpx;
}
.name{
  height: 48rpx;
  display: flex;
}
.name text:nth-child(1){
  font-size:34rpx;
  font-weight: 550;
  margin-right: 14rpx;
}
.name text:nth-child(2){
  font-size: 26rpx;
  margin-right: 24rpx;
}

.hospital{
  height: 48rpx;
}
写回答

1回答

谢成

2021-05-17

sorry,这个问题我确实没有遇到过。

建议可以在小程序官方社区发个帖子,看看官方工程师有没有好的解决办法。

0
1
Raymond0913
已经发了https://developers.weixin.qq.com/community/develop/doc/000ea0310e8c782a512c42f6456800 但还没人回复😥,唉,虽然没解决但还是感谢老师的热心回复👍
2021-05-17
共1条回复

微信小程序云开发-从0打造云音乐全栈小程序

横跨小程序端、云后端、CMS一站式云开发的小程序全栈课程

1938 学习 · 2768 问题

查看课程