页面使用了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;
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;
}
你碰到的问题解决了吗?
https://developers.weixin.qq.com/s/s9TtimmR7nqO