HarmonyOS 请问ArkTS如何实现视频预览功能？

import display from '@ohos.display';  
  
/**  
 * inspector对象  
 */  
interface inspectorObj{  
  $type: string  // 组件的tagName  
  $ID: string    //  
  $rect: string  // 位置信息 [36.00, 36.00],[1044.00,996.00]  数组的第一个值是组件左上角的坐标，第二个值是组件右下角的坐标  
  $debugLine: string  
  $attrs: string  
}  
  
@Entry  
@Component  
struct ScrollVideo {  
  controller: VideoController = new VideoController();  
  screenHeight: number = 0;  
  
  aboutToAppear(): void {  
    // 获取屏幕属性  
    display.getAllDisplays().then((data) => {  
      const screenDisplays: Array<display.Display> = data;  
      this.screenHeight = screenDisplays[0].height;  
      console.info('Succeeded in obtaining all the display objects. Data: ' + JSON.stringify(data));  
      console.info(`Succeeded in obtaining all the display objects  ${this.screenHeight}`)  
    }).catch((err: Error) => {  
      console.error('Failed to obtain all the display objects. Code: ' + JSON.stringify(err));  
    });  
  }  
  
  build() {  
    Scroll(){  
      Column(){  
        Row().width('100%').height('110%').backgroundColor(Color.Blue)  
        Video({  
          src: $rawfile('videoTest.mp4'),  
          controller: this.controller  
        }).width('100%').height(400).id('videoCom')  
        Row().width('100%').height('120%').backgroundColor(Color.Blue)  
      }  
    }  
    .width('100%').height('100%')  
    .onScrollStop(()=>{ // 滚动结束后  
      const videoInspector = getInspectorByKey('videoCom'); // video位置信息  
      let obj: inspectorObj = JSON.parse(videoInspector);  
      const rectInfo: object = JSON.parse(`[${obj.$rect}]`);  
      const top: number = JSON.parse(`[${rectInfo[0]}]`)[1]; // 距离屏幕顶部  
      const bottom: number = JSON.parse(`[${rectInfo[1]}]`)[1]; // 距离屏幕底部  
      if(top >= 0 && bottom <= this.screenHeight) { // 在屏幕里  
        this.controller.start();  
      } else {  
        this.controller.pause();  
      }  
      console.log(`rectInfo    ${rectInfo}`)  
    })  
  }  
}