HarmonyOS 鸿蒙Next Video 加载网络视频如何获取网络视频的第一帧作为预览图

Video 加载网络视频如何获取网络视频的第一帧作为预览图  以下是代码实例:

import { UrlData } from ‘…/baen/UrlData’
import { media } from ‘@kit.MediaKit’;
import fs from ‘@ohos.file.fs’;
import { loginComponentManager } from ‘@kit.AccountKit’;

@Entry
@Component
struct Page6 {
@State urlArray: Array<UrlData> =
[new UrlData(“https://www.jiuyeyun.wang/api/jobslink-obs/front/huaWeiObs/obtain/base64/dGVzdC9qb2JzbGluay10ZW5hbnQvY29tcGFueS93ZWJzaXRlL2Jhbm5lci8xNzUwMzQwODIxNzY2Mzg1NjY1L2ExNDhiMDFlMThhY2I1MThjZWU5MThjMzFkYzRmZTA1.png”,
“IMAGE”),
new UrlData(“https://www.jiuyeyun.wang/api/jobslink-obs/front/huaWeiObs/obtain/base64/dGVzdC9qb2JzbGluay10ZW5hbnQvY29tcGFueS93ZWJzaXRlL2Jhbm5lci8xNzUwMzQwODIxNzY2Mzg1NjY1Lzk3MDkwMjY3ODIwYWFhYWEzZDA5NDdjNDIwZWViMzc3.mp4”,
“VIDEO”),
new UrlData(“https://www.jiuyeyun.wang/api/jobslink-obs/front/huaWeiObs/obtain/base64/dGVzdC9qb2JzbGluay10ZW5hbnQvY29tcGFueS93ZWJzaXRlL2Jhbm5lci8xNzUwMzQwODIxNzY2Mzg1NjY1L2ExNDhiMDFlMThhY2I1MThjZWU5MThjMzFkYzRmZTA1.png”,
“IMAGE”)] // 设置视频控制器，可以控制视频的播放状态
controller: VideoController = new VideoController()
@State pixelMap: PixelMap | undefined = undefined
private url: string =
“https://www.jiuyeyun.wang/api/jobslink-obs/front/huaWeiObs/obtain/base64/dGVzdC9qb2JzbGluay10ZW5hbnQvY29tcGFueS93ZWJzaXRlL2Jhbm5lci8xNzUwMzQwODIxNzY2Mzg1NjY1Lzk3MDkwMjY3ODIwYWFhYWEzZDA5NDdjNDIwZWViMzc3.mp4”
aboutToAppear(): void {
this.getVideoThumbnail(this.url)
}
async getVideoThumbnail(videoPath: string) {
}
build() {
Column() {
Swiper() {
ForEach(this.urlArray, (item: UrlData) => {
if (item.type == “IMAGE”) {
Image(item.url).width(“100%”).height(150)
} else {
Video({
src: item.url, //视频的数据源
currentProgressRate: 1.0, //视频播放倍速
previewUri: “”, //视频未播放时预览图片的路径,默认不显示
controller: this.controller//设置视频控制器可以控制视频的播放状态
})
.width(“100%”)
.height(150)
.muted(false)//是否设置静音
.autoPlay(false)//是否自动播放
.controls(true)//设置控制视频播放的控制栏是否显示
.objectFit(ImageFit.Cover)//设置视频显示模式
.loop(false) //设置是否单个视频循环播放
}
})
} //设置是否自动播放
.autoPlay(true) //设置使用自动播放时播放的时间间隔。
.interval(3000) //设置是否开启循环
.loop(true) //设置禁用组件导航点交互功能。设置为true时表示导航点可交互。
.indicatorInteractive(true) //设置子组件切换的动画时长
.duration(1000) //设置子组件与子组件之间间隙。不支持设置百分比
.itemSpace(0)
.indicator(false) //隐藏底部指示器
.onChange((index: number) => { //如果循环的是图片则把视频重置
if (this.urlArray[index].type == “IMAGE”) { //video组件重置AVPlayer。显示当前帧，再次播放时从头开始播放。
this.controller.stop()
this.controller.reset()
}
})
}.width(“100%”)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>