如何解决Video组件播放前出现预览黑屏的问题
=======================

#### 问题现象

Video组件在未播放视频内容之前是黑色的，开始播放后，再点击暂停，才可以正常展示暂停时的视频内容。

问题现象效果如图：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/55/v3/Nxnh2CSpTKaOnWNqj6tGNA/zh-cn_image_0000002658913487.png?HW-CC-KV=V1&HW-CC-Date=20260709T133908Z&HW-CC-Expire=86400&HW-CC-Sign=5C5A232CC894BCFB89010F946F61CB7AA3EFEEE6E8D6ACDBEC295AF8AF7D26A1 "点击放大")

#### 背景知识

[Video](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-media-components-video)：用于播放视频文件并控制其播放状态的组件。

#### 问题定位

根据[VideoOptions对象说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-media-components-video#videooptions对象说明)，VideoOptions的previewUri属性（即视频未播放时的预览图片路径），默认不显示图片。如果不指定预览图片，则会出现开始播放前，黑屏的现象。

#### 分析结论

针对这个问题，可以考虑以下两种方案：

*   给视频设置一个展示图片。
*   把视频设置成自动播放，再使用setTimeout设置延迟跳过黑屏阶段。

#### 修改建议

根据问题定位可知，问题现象的根因在于没有手动为视频设置预览图片，因此可以参考以下代码进行修复：

*   **方案一：给视频设置一个海报。**
    
    **代码示例如下：**
    
    Video({
      src: $r('app.media.videoTest'), _// $r('app.media.videoTest')仅作展示，使用时请开发者自行替换_
      previewUri: $r('app.media.example'), _// $r('app.media.example')仅作展示，使用时请开发者自行替换_
      controller: this.controller
    })
      .height('50%');
    
    在视频播放前显示预览图片，建议将视频的第一帧作为预览图片。
    
*   **方案二：自动播放，跳过黑屏阶段。**
    
    部分场景，如上下滑动刷新不同视频，且要求视频自动播放的时候，可以考虑使用这个方案。
    
    **代码示例如下：**
    
    Video({
      src: $r('app.media.videoTest'), _// $r('app.media.videoTest')仅作展示，使用时请开发者自行替换_
      controller: this.controller
    })
      .visibility(this.isVisible)
      .autoPlay(true) _// 设置自动播放_
      .loop(true)
      .controls(true)
      .width('100%')
      .height('50%')
      .onStart(() => {
        setTimeout(() => { _// 使用setTimeout设置延迟跳过黑屏阶段_
          this.controller.setCurrentTime(1, SeekMode.PreviousKeyframe);
          this.isVisible = Visibility.Visible;
        }, 150);
      });
    

完整示例代码参考如下：

@Entry
@Component
struct video {
  controller: VideoController = new VideoController();
  @State isVisible: Visibility = Visibility.None;

  build() {
    Column() {
      Video({
        src: $r('app.media.videoTest'), _// $r('app.media.videoTest')仅作展示，使用时请开发者自行替换_
        previewUri: $r('app.media.example'), _// $r('app.media.example')仅作展示，使用时请开发者自行替换_
        controller: this.controller
      })
        .height('50%');

      Video({
        src: $r('app.media.videoTest'), _// $r('app.media.videoTest')仅作展示，使用时请开发者自行替换_
        controller: this.controller
      })
        .visibility(this.isVisible)
        .autoPlay(true) _// 设置自动播放_
        .loop(true)
        .controls(true)
        .width('100%')
        .height('50%')
        .onStart(() => {
          setTimeout(() => { _// 使用setTimeout设置延迟跳过黑屏阶段_
            this.controller.setCurrentTime(1, SeekMode.PreviousKeyframe);
            this.isVisible = Visibility.Visible;
          }, 150);
        });
    };
  }
}