HarmonyOS鸿蒙Next中video样式

发布于 1周前 作者 eggper 来自 鸿蒙OS

HarmonyOS鸿蒙Next中video样式 请问video在未播放时如果显示第一帧的,换句话问:如何将视频第一帧作为video的预览图?

3 回复

可以先获取视频的第一帧缩略图Image来展示在vide上方,等播放的时候去掉Image。获取任意时间帧图片,三方库如下: https://gitee.com/openharmony-tpc/mp4parser

或者官方接口: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-media-V5#avimagegenerator12

video组件本身没有直接展示首帧画面的功能。如果是网络视频,需要您缓存一些数据在本地,然后再获取首帧图片。或者后台服务器可以返回预览图

avImageGenerator.fdSrc需要自己设置,因为视频资源来自沙箱或者相册。参考如下方法:

async testFetchFrameByTime(fileUri:string) {

  // 创建AVImageGenerator对象
  try {
    let avImageGenerator: media.AVImageGenerator = await media.createAVImageGenerator()

    // 设置fdSrc
    let resFile = fs.openSync(fileUri, fs.OpenMode.READ_ONLY)
    let fileLength = fs.statSync(resFile.fd).size
    avImageGenerator.fdSrc = { fd: resFile.fd, offset: 0, length: fileLength }

    // 初始化入参
    let timeUs = 0
    let queryOption = media.AVImageQueryOptions.AV_IMAGE_QUERY_NEXT_SYNC
    let param: media.PixelMapParams = {
      width: 300,
      height: 300
    }

    // 获取缩略图(promise模式)
    let pixelMap = await avImageGenerator.fetchFrameByTime(timeUs, queryOption, param)
    this.pixelMap = pixelMap

    // 释放资源(promise模式)
    avImageGenerator.release()
    fs.closeSync(resFile.fd)
  } catch (e) {
    console.info(`testTag fetchFrameByTime catch exception: ${JSON.stringify(e)}`)
  }
}

更多关于HarmonyOS鸿蒙Next中video样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,video组件用于播放视频内容。其样式可以通过设置相关属性来自定义。以下是video组件的一些常见样式属性:

  1. widthheight:用于设置视频播放器的宽度和高度。可以设置为固定像素值,如width="300px",或使用百分比,如width="100%"

  2. object-fit:控制视频内容如何适应容器。常用值包括:

    • contain:保持视频的宽高比,视频内容完全显示在容器内。
    • cover:保持视频的宽高比,视频内容覆盖整个容器,可能会裁剪部分内容。
    • fill:拉伸视频内容以填充整个容器,可能会失真。
  3. border-radius:用于设置视频播放器的圆角。例如,border-radius="10px"会使视频播放器的四个角变为圆角。

  4. background-color:设置视频播放器的背景颜色。在视频加载或未播放时显示。

  5. controls:布尔属性,用于显示或隐藏视频播放器的控制条。设置为true时显示控制条,false时隐藏。

  6. autoplay:布尔属性,用于设置视频是否自动播放。设置为true时视频加载后自动播放。

  7. loop:布尔属性,用于设置视频是否循环播放。设置为true时视频播放结束后自动重新开始。

  8. muted:布尔属性,用于设置视频是否静音。设置为true时视频静音播放。

示例代码:

<video 
  src="example.mp4" 
  width="100%" 
  height="300px" 
  object-fit="cover" 
  border-radius="10px" 
  background-color="#000" 
  controls 
  autoplay 
  loop 
  muted>
</video>

在HarmonyOS鸿蒙Next中,video组件的样式可以通过以下几种方式自定义:

  1. 布局属性:通过widthheightmarginpadding等属性调整视频播放器的尺寸和位置。

  2. 背景与边框:使用background-colorborder-radiusborder-width等属性设置播放器的背景色、圆角和边框样式。

  3. 控制栏样式:通过controls属性显示或隐藏默认控制栏,或使用自定义控制栏组件来替换默认样式。

  4. 播放器状态:利用autoplayloopmuted等属性控制视频的自动播放、循环播放和静音状态。

  5. 响应式设计:通过媒体查询或flex布局,确保视频组件在不同设备上的适应性。

通过这些方式,开发者可以根据需求灵活定制video组件的外观和行为。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!