老师,关于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,这个问题我确实没有遇到过。
建议可以在小程序官方社区发个帖子,看看官方工程师有没有好的解决办法。
012021-05-17
相似问题