HarmonyOS 鸿蒙Next中“仿抖音快手”App开发技术分享（二）选择相册中的视频

HarmonyOS 鸿蒙Next中“仿抖音快手”App开发技术分享（二）选择相册中的视频

上一节介绍了Video组件的基本用法，那么要想观看视频播放效果，还得先找到待播放的视频文件才行。暂且不提网络视频，因为访问网络需要申请授权，只说从系统相册挑选一个视频文件，那就简单多了。

鸿蒙提供了photoAccessHelper工具，无需申请相册或存储权限，即可从相册中选择若干视频。使用photoAccessHelper之前，要在ETS代码开头添加下面的导包语句：

import { photoAccessHelper } from '@kit.MediaLibraryKit';

photoAccessHelper翻译过来叫做相片访问帮助器，这个帮助器主要提供了两个方法，一个是PhotoSelectOptions，可获取相片选择参数；另一个是PhotoViewPicker，可获取相片选择器。这里说是相片，实际可同时访问图片和视频。

从PhotoSelectOptions获取的相片选择参数中，主要有下列四个参数：

• MIMEType：设置选择器可访问的文件类型。填photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE表示图片，填VIDEO_TYPE表示视频。
• maxSelectNumber：设置单次挑选图片的最大数量。如果只需选择一张图片，填1即可。
• isSearchSupported：是否支持搜索。默认为true。
• isPhotoTakingSupported：是否支持拍摄。默认为true。

于是从相册选择单个视频的参数设置代码如下：

let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();

photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;

photoSelectOptions.maxSelectNumber = 1;

从PhotoViewPicker返回的相片选择器，可调用select方法拉起相册，供用户挑选相册视频。select方法的输入参数就是前面得到的PhotoSelectOptions对象，select方法的视频选择结果通过异步方式返回，返回结果为PhotoSelectResult类型，结果对象的photoUris字段保存着用户选中的一个或者多个视频的文件路径。

下面是调用PhotoViewPicker对象的select方法代码例子：

let photoPicker = new photoAccessHelper.PhotoViewPicker();

photoPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {

  console.info('PhotoViewPicker.select successfully, photoSelectResult uri: ' + JSON.stringify(photoSelectResult));

  this.videoPath = photoSelectResult.photoUris[0]

}).catch((err: BusinessError) => {

  console.error('PhotoViewPicker.select failed with err: ' + JSON.stringify(err));

});

上面代码从挑选结果中取到第一个视频路径保存在videoPath变量中，接着即可使用Video组件渲染该路径的视频画面，Video组件的渲染代码如下：

Video({
  src: this.videoPath
})
  .width('100%').height('100%')
  .objectFit(ImageFit.Contain) // 组件区域包含整个视频画面
  .autoPlay(false) // 是否自动播放
  .controls(true) // 是否显示控制条
  .loop(false) // 是否循环播放

综合以上的相册视频挑选代码，点击选择按钮打开的相册界面如下图所示：

选中某个视频之后，点击相册右上角的确认按钮，回到测试App界面如下图所示：

可见通过photoAccessHelper正常实现了相册视频的挑选功能。

下一篇文章会介绍如何利用相对布局在短视频画面中叠加各种交互图标。