HarmonyOS鸿蒙Next中如何配置视频预览图和资源加载？

HarmonyOS鸿蒙Next中如何配置视频预览图和资源加载？ 如何配置视频预览图和资源加载？

previewUri属性用于指定视频的预览图。如何使用PixelMap或Resource来为视频指定预览图像？这种方式如何帮助提升用户体验？

3 回复

可以直接使用Resource路径指定本地图片，或者使用avImageGenerator.fetchFrameByTime获取时评的缩略图。

参要用例：

// 获取视频指定时间的缩略图，并通过Image控件显示在屏幕上。
async testFetchFrameByTime() {
  // 创建AVImageGenerator对象
  let avImageGenerator: media.AVImageGenerator = await media.createAVImageGenerator()
  // 设置fdSrc
  avImageGenerator.fdSrc = await getContext(this).resourceManager.getRawFd('demo.mp4');

  // 初始化入参
  let timeUs = 0
  let queryOption = media.AVImageQueryOptions.AV_IMAGE_QUERY_NEXT_SYNC
  let param: media.PixelMapParams = {
    width : 300,
    height : 300
  }
  // 获取缩略图（promise模式）
  this.pixelMap = await avImageGenerator.fetchFrameByTime(timeUs, queryOption, param)
  // 释放资源（promise模式）
  avImageGenerator.release()
  console.info(TAG, `release success.`)
}

更多关于HarmonyOS鸿蒙Next中如何配置视频预览图和资源加载？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中配置视频预览图和资源加载，可以通过以下步骤实现：

  1. 视频预览图配置：

    • 使用VideoPlayer组件时，可以通过previewUri属性设置视频预览图。预览图可以是本地资源或网络资源。
    • 示例代码：
      VideoPlayer({
  previewUri: 'common/image/preview.png',
  src: 'common/video/sample.mp4'
})

  2. 资源加载配置：

    • 使用ResourceManager模块来管理和加载资源。可以通过getMediaContent方法获取视频资源。
    • 示例代码：
      import resourceManager from '@ohos.resourceManager';

resourceManager.getMediaContent('video/sample.mp4').then((value) => {
  console.log('Video resource loaded:', value);
}).catch((error) => {
  console.error('Failed to load video resource:', error);
});

  3. 网络资源加载：

    • 使用Http模块加载网络视频资源，并通过VideoPlayer组件播放。
    • 示例代码：
      import http from '@ohos.net.http';

let httpRequest = http.createHttp();
httpRequest.request('https://example.com/sample.mp4', (err, data) => {
  if (!err) {
    VideoPlayer({
      src: data.result
    })
  }
});

在HarmonyOS鸿蒙Next中，配置视频预览图和资源加载可以通过以下步骤实现：

  1. 配置视频预览图：使用<video>标签的poster属性指定预览图的路径，例如：

    <video src="video.mp4" poster="preview.jpg" controls></video>

  2. 资源加载：通过<video>标签的preload属性控制资源的加载方式，可选值包括none、metadata和auto，例如：

    <video src="video.mp4" preload="metadata" controls></video>

此外，可以使用<source>标签指定多个视频格式以确保兼容性。通过这些配置，可以优化视频播放体验并提升性能。

回到顶部