收藏
回答

@@@官方!video全屏后视频没全屏?

使用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{
  width100%;
  position: relative;
}
.controll-box{
  position: absolute;
  bottom0px;
  width100%;
  height50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: red;
}
.demo{
  width100%;
  height100%;
}
.button{
  margin10px;
}


最后一次编辑于  2023-10-07
回答关注问题邀请回答
收藏

2 个回答

  • 拥有八块腹肌的Andy👑
    拥有八块腹肌的Andy👑
    2023-12-20

    请问楼主解决了吗?我也是ios,使用video全屏后,里面的流只有左上角一小块。

    2023-12-20
    有用
    回复 1
    • 李振杰
      李振杰
      2023-12-28
      你也是全屏后滑动切换视频吗,这个目前ios下处理不了。我们不这么做了
      2023-12-28
      回复
  • 一笑皆春
    一笑皆春
    2023-10-07

    示例代码

    2023-10-07
    有用
    回复 7
    • 李振杰
      李振杰
      2023-10-07
      已经贴出可复现代码
      2023-10-07
      回复
    • 一笑皆春
      一笑皆春
      2023-10-07回复李振杰
      你这个示例代码,我点击全屏没反应呀
      2023-10-07
      回复
    • 李振杰
      李振杰
      2023-10-07回复一笑皆春
      需要真机预览或者调试
      2023-10-07
      回复
    • 李振杰
      李振杰
      2023-10-07回复一笑皆春
      我使用开发工具不使用模板创建,创建完成后删除了app.json里renderer:skyline的相关配置
      2023-10-07
      回复
    • 一笑皆春
      一笑皆春
      2023-10-07回复李振杰
      我试了安卓可以,ios确实有问题,估计是没适配好,代码片段
      https://developers.weixin.qq.com/s/trPUQMmv7FLy
      2023-10-07
      回复
    查看更多(2)
登录 后发表内容