uni-app 动态加载视频列表时 video 黑屏

在 uni-app 中动态加载视频列表时，<video> 组件出现黑屏的问题，可能由以下几个原因引起。以下是一些常见的排查和解决方法：

1. 视频源问题

确保视频源的 URL 是有效的，并且支持在移动端或浏览器中播放。你可以：

• 检查视频链接是否可访问。
• 尝试直接在浏览器中打开视频链接，确认是否能正常播放。
• 确保视频格式是支持的格式（如 MP4、WebM 等）。

2. 动态绑定 src 的时机问题

在动态加载视频列表时，如果 src 赋值时机不正确，可能会导致黑屏。确保在 src 赋值时，<video> 组件已经正确渲染。例如：

<template>
  <view>
    <video v-for="(item, index) in videoList" :key="index" :src="item.url" controls></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoList: []
    };
  },
  mounted() {
    // 模拟动态加载视频列表
    setTimeout(() => {
      this.videoList = [
        { url: 'https://example.com/video1.mp4' },
        { url: 'https://example.com/video2.mp4' }
      ];
    }, 1000);
  }
};
</script>

3. <video> 组件的兼容性问题

某些平台（如微信小程序或 H5）对 <video> 组件的支持可能存在差异。可以尝试以下方法：

• 微信小程序：使用微信小程序的原生 <video> 组件，或者检查是否有特殊配置需求。
• H5：确保视频格式和编码是浏览器支持的。

4. 自动播放问题

在某些平台（如 iOS Safari 或微信小程序）中，视频的自动播放可能会被限制，导致黑屏。可以尝试：

• 添加 controls 属性，让用户手动播放。
• 使用 autoplay 属性时，确保视频是静音的（muted），因为某些平台禁止自动播放带声音的视频。

<video :src="item.url" controls autoplay muted></video>

5. 视频解码问题

如果视频的编码格式不支持，可能导致黑屏。可以尝试：

• 使用标准的 H.264 编码（MP4 格式）。
• 使用工具（如 FFmpeg）将视频重新编码为兼容的格式。

6. 检查控制台错误

打开开发者工具，检查是否有错误信息。例如：

• 网络请求失败。
• 视频解码失败。
• 跨域问题（CORS）。

7. uni-app 版本问题

确保使用的是最新版本的 uni-app，某些旧版本可能存在兼容性问题。

8. 平台差异

不同平台（如 H5、微信小程序、App）对 <video> 组件的支持不同，需要根据平台进行适配。例如：

• H5：使用 <video> 标签。
• 微信小程序：使用 <video> 组件，并确保视频源是 HTTPS。
• App：使用原生 <video> 组件。

9. 自定义组件封装

如果使用自定义组件封装 <video>，确保组件的逻辑正确。例如，动态更新 src 时，可能需要手动调用 load 方法。

示例代码

以下是一个完整的示例，动态加载视频列表并确保正常播放：

<template>
  <view>
    <video
      v-for="(item, index) in videoList"
      :key="index"
      :src="item.url"
      controls
      autoplay
      muted
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoList: []
    };
  },
  mounted() {
    // 模拟动态加载视频列表
    setTimeout(() => {
      this.videoList = [
        { url: 'https://www.w3schools.com/html/mov_bbb.mp4' },
        { url: 'https://www.w3schools.com/html/movie.mp4' }
      ];
    }, 1000);
  }
};
</script>