uni-app 微信小程序 video标签动态设置direction不生效

uni-app 微信小程序 video标签动态设置direction不生效

示例代码：

<video :direction="videoDirection"></video>  

data:{
videoDirection:90;
}

this.videoDirection = -90;

操作步骤：

<video>标签的direction只能初始化的时候确定，通过绑定变量动态修改无效。

预期结果：

<video>标签的direction可以通过绑定变量的方式修改

实际结果：

videoDirection的值已改变，但是视频方向并没有改变

bug描述：

<video>标签的direction只能初始化的时候确定，通过绑定变量无法动态修改


| 信息类别           | 信息内容     |
|------------------|------------|
| 产品分类           | uniapp/小程序/微信 |
| PC开发环境操作系统    | Windows       |
| PC开发环境操作系统版本号 | win10         |
| HBuilderX类型        | 正式          |
| HBuilderX版本号      | 4.08          |
| 第三方开发者工具版本号  | 1.06.2402040  |
| 基础库版本号         | 3.4.2         |
| 项目创建方式         | HBuilderX      |

更多关于uni-app 微信小程序 video标签动态设置direction不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

注意看微信官方文档

更多关于uni-app 微信小程序 video标签动态设置direction不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


哦哦，就是只在触发全屏时有效，全屏后修改无效~

在 Uni-App 中，微信小程序的 video 组件确实支持通过 direction 属性来控制视频的方向（横屏或竖屏）。然而，如果你尝试动态设置 direction 属性时发现不生效，可能是因为以下几点原因：

1. direction 属性的动态更新限制

direction 属性在某些情况下可能不支持动态更新。也就是说，一旦 video 组件被创建，direction 属性的值可能无法通过数据绑定动态改变。

2. 使用 createVideoContext 方法

如果你需要动态改变视频的方向，可以尝试使用微信小程序提供的 createVideoContext 方法来控制视频的方向。

// 在页面的 onLoad 或 onReady 生命周期中创建 video 上下文
onReady() {
  this.videoContext = uni.createVideoContext('myVideo', this);
}

// 在需要改变方向时调用
changeDirection(direction) {
  this.videoContext.requestFullScreen({ direction: direction });
}

3. 强制刷新组件

如果你仍然希望通过修改 direction 属性来改变视频方向，可以尝试强制刷新 video 组件。例如，通过修改 video 组件的 key 属性来强制重新渲染组件。

<video :key="videoKey" id="myVideo" :direction="direction" src="your-video-url"></video>

data() {
  return {
    videoKey: 0,
    direction: 0
  };
},
methods: {
  changeDirection(newDirection) {
    this.direction = newDirection;
    this.videoKey += 1; // 强制重新渲染 video 组件
  }
}

4. 检查微信小程序基础库版本

确保你使用的微信小程序基础库版本支持 direction 属性的动态更新。如果基础库版本过低，可能会导致某些功能无法正常使用。

5. 使用 fullscreen 属性

如果你想控制视频的全屏模式，可以使用 fullscreen 属性，并结合 direction 属性来控制视频的方向。

<video id="myVideo" :fullscreen="isFullscreen" :direction="direction" src="your-video-url"></video>

data() {
  return {
    isFullscreen: false,
    direction: 0
  };
},
methods: {
  toggleFullscreen(newDirection) {
    this.isFullscreen = !this.isFullscreen;
    this.direction = newDirection;
  }
}
回到顶部