使用video作为一个内容盒子,在video里使用swiper嵌套两个video实现全屏状态下平滑切换视频,点击全屏的时候video盒子全屏,swiper内video在ios系统下不能全屏。
之所以使用video里嵌套video是为了 在全屏状态下更流畅的切换视频,修改src的话会有加载过程,屏幕会黑一下
复现代码
<video class="video-player-box" id="video_player_box" controls="{{false}}">
<video autoplay="{{true}}" class="demo" object-fit="cover" controls="{{false}}" src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-720p.mp4"></video>
<view class="controll-box">
<view class="button" bind:tap="fullscreen">全屏</view>
<view class="button" bind:tap="cancelfullscreen">取消全屏</view>
</view>
</video>
// index.js
Page({
onLoad(){
this.data.playerBox=wx.createVideoContext('video_player_box', this)
},
fullscreen:function(){
this.data.playerBox.requestFullScreen({direction:90})
},
cancelfullscreen:function(){
this.data.playerBox.exitFullScreen();
}
})
.video-player-box{
width: 100%;
position: relative;
}
.controll-box{
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: red;
}
.demo{
width: 100%;
height: 100%;
}
.button{
margin: 10px;
}
请问楼主解决了吗?我也是ios,使用video全屏后,里面的流只有左上角一小块。
示例代码
https://developers.weixin.qq.com/s/trPUQMmv7FLy