RichEditor组件如何添加视频
==================

#### 问题现象

RichEditor组件是否可以添加视频，如何添加？

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/77/v3/hLwGCN0MQ6SVbWKrQ8yc1w/zh-cn_image_0000002628569784.png?HW-CC-KV=V1&HW-CC-Date=20260709T133936Z&HW-CC-Expire=86400&HW-CC-Sign=F8500ED4189CDC0A6AFC91D5A8829287101E0294895038AE78CA728295C89F72 "点击放大")

#### 背景知识

*   [RichEditor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-richeditor)组件提供了[addBuilderSpan](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-richeditor#addbuilderspan11)接口用于添加用户自定义布局Span。
*   [Video](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-media-components-video#video-1)：用于播放视频文件并控制其播放状态的组件。

#### 解决方案

1.  配置Video组件相关参数。
2.  使用addBuilderSpan接口将Video组件添加至文本框中。
    
    @Entry
    @Component
    struct VideoDemo {
      controller: RichEditorController \= new RichEditorController();
      option: RichEditorOptions \= { controller: this.controller };
      private my\_offset: number | undefined \= undefined;
      private my\_builder: CustomBuilder \= undefined;
    
      @Builder
      placeholderBuilder() {
        Row({ space: 2 }) {
       _   // 配置Video组件各项参数_
          Video({
            src: $rawfile('video-v8.mp4'), _// 根据场景需要添加视频_
            previewUri: $r('app.media.background'), _// 视频未播放时的预览图片路径_
            currentProgressRate: PlaybackSpeed.Speed\_Forward\_1\_00\_X, _// 视频播放倍速_
            controller: new VideoController() _//_ _设置视频控制器，可以控制视频的播放状态_
          }).width('100%');
        }
    
        .width('100%')
        .height(250)
        .borderRadius(10)
      }
    
      build() {
        Column() {
          Column() {
            RichEditor(this.option)
              .width('100%')
              .padding(\-16);
    
            Row() {
              Button('builder1')
                .margin({ bottom: 15, top: 15 })
                .onClick(() \=\> {
                  this.my\_builder \= () \=\> {
                    this.placeholderBuilder();
                  };
                });
            };
    
            Button('add span')
              .onClick(() \=\> {
          _      // 使用addBuilderSpan接口将Video组件添加到文本框中_
                let num \= this.controller.addBuilderSpan(this.my\_builder, { offset: this.my\_offset });
                console.info('addBuilderSpan return ' \+ num);
              });
          }
          .width('100%')
          .height('70%');
        }
        .width('100%');
      }
    }