上一节先容了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正常实现了相册视频的挑选功能。
下一篇文章会先容如何利用相对结构在短视频画面中叠加各种交互图标。
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |