uni-app iOS 上 video 组件全屏播放时视频未铺满

uni-app iOS 上 video 组件全屏播放时视频未铺满

开发环境 版本号 项目创建方式
Mac macOS Big Sur 11.3.1 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：macOS Big Sur 11.3.1

HBuilderX类型：正式

HBuilderX版本号：3.1.13

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iPhone 12 pro max

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<template>  
    <view>  
        <video  
          id="videoPlayer"  
          src="https://goeasy-im.oss-accelerate.aliyuncs.com/goeasy-im-wenwen/uni-video_58379_202105261129.mp4"  
          @fullscreenchange="onVideoFullScreenChange"  
          @play="onVideoPlayStart"  
        ></video>  
    </view>  
</template>

export default {  
    data() {  
        return {  
            video: {  
                context: null,  
            }  
        }  
    },  
    onReady() {  
      this.video.context = uni.createVideoContext('videoPlayer');  
    },  
    methods: {  
        onVideoPlayStart() {  
          this.video.context.requestFullScreen({  
            direction: 0,  
          });  
        },  
        onVideoFullScreenChange(e) {  
          if (!e.detail.fullScreen) {  
            this.video.context.stop();  
          }  
        },  
    }  
}

更多关于uni-app iOS 上 video 组件全屏播放时视频未铺满的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

收到 我们这边查看一下

更多关于uni-app iOS 上 video 组件全屏播放时视频未铺满的实战教程也可以访问 https://www.itying.com/category-93-b0.html


3.1.15 的Alpha 已经解决 可以升级HBuilder 试一下

你好，今天升级HB3.6.17的版本后云打包自定义基座，ios播放视频选择全屏后页面乱了，没升级之前是正常的

在iOS设备上，video组件全屏播放时视频未铺满的问题通常与视频宽高比和iOS系统默认渲染方式有关。以下是几种解决方案：

  1. 设置object-fit属性：
<video 
  id="videoPlayer"
  src="https://goeasy-im.oss-accelerate.aliyuncs.com/goeasy-im-wenwen/uni-video_58379_202105261129.mp4"
  object-fit="fill"
  @fullscreenchange="onVideoFullScreenChange"
  @play="onVideoPlayStart"
></video>
  1. 添加样式控制：
video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
  1. 使用CSS3 transform缩放：
video {
  transform: scale(1.1);
  transform-origin: center;
}
回到顶部