uni-app 暗黑模式 nvue页面下的video标签 全屏时不能正常播放

uni-app 暗黑模式 nvue页面下的video标签 全屏时不能正常播放

操作步骤：

  1. 开启暗黑模式
  2. 新建*.nvue 页面
  3. 输入 video标签，任意播放链接
  4. 点击全屏

预期结果：

全屏状态下正常播放

实际结果：

全屏状态下不能正常播放

bug描述：

开启暗黑模式，nvue页面下的video标签，全屏时不能正常播放


| 信息类别         | 详细信息       |
|------------------|----------------|
| 产品分类         | uniapp/App     |
| PC开发环境操作系统 | Windows        |
| PC开发环境操作系统版本号 | win11          |
| HBuilderX类型    | 正式           |
| HBuilderX版本号  | 3.99           |
| 手机系统         | Android        |
| 手机系统版本号    | Android 13     |
| 手机厂商         | vivo           |
| 手机机型         | iqoo Neo5      |
| 页面类型         | nvue           |
| vue版本         | vue3           |
| 打包方式         | 云端           |
| 项目创建方式     | HBuilderX      |

更多关于uni-app 暗黑模式 nvue页面下的video标签 全屏时不能正常播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 暗黑模式 nvue页面下的video标签 全屏时不能正常播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 nvue 页面中，使用 video 标签并启用暗黑模式时，可能会遇到全屏播放时无法正常播放的问题。这通常与 nvue 页面的渲染机制以及 video 组件的全屏处理方式有关。以下是一些可能的解决方案：

1. 检查 video 标签的 controls 属性

确保 video 标签的 controls 属性设置为 true，以便在全屏模式下显示默认的控制条。

<video src="your-video-url.mp4" controls></video>

2. 使用 uni-app 提供的 video 组件

uni-app 提供了原生的 video 组件，可能比 nvue 中的 video 标签更稳定。你可以尝试使用 uni-app 的 video 组件来替代 nvue 中的 video 标签。

<template>
  <video src="your-video-url.mp4" controls></video>
</template>

3. 使用 uni.createVideoContext 进行控制

你可以使用 uni.createVideoContext 来创建视频上下文，并通过 JavaScript 控制视频的播放、暂停等操作。这样可以避免直接依赖 video 标签的全屏行为。

const videoContext = uni.createVideoContext('myVideo');

// 播放视频
videoContext.play();

// 暂停视频
videoContext.pause();

4. 检查暗黑模式的样式冲突

暗黑模式可能会影响 video 组件的样式或行为。你可以尝试在暗黑模式下调整 video 组件的样式，或者暂时禁用暗黑模式，看看问题是否依然存在。

5. 使用 web-view 嵌入视频

如果以上方法都无法解决问题，你可以考虑使用 web-view 组件来嵌入视频播放器，这样可以避免 nvue 的渲染问题。

<web-view src="https://www.example.com/video-player"></web-view>
回到顶部