HarmonyOS鸿蒙Next中video样式
HarmonyOS鸿蒙Next中video样式 请问video在未播放时如果显示第一帧的,换句话问:如何将视频第一帧作为video的预览图?
可以先获取视频的第一帧缩略图Image来展示在vide上方,等播放的时候去掉Image。获取任意时间帧图片,三方库如下: https://gitee.com/openharmony-tpc/mp4parser
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
组件的一些常见样式属性:
-
width 和 height:用于设置视频播放器的宽度和高度。可以设置为固定像素值,如
width="300px"
,或使用百分比,如width="100%"
。 -
object-fit:控制视频内容如何适应容器。常用值包括:
contain
:保持视频的宽高比,视频内容完全显示在容器内。cover
:保持视频的宽高比,视频内容覆盖整个容器,可能会裁剪部分内容。fill
:拉伸视频内容以填充整个容器,可能会失真。
-
border-radius:用于设置视频播放器的圆角。例如,
border-radius="10px"
会使视频播放器的四个角变为圆角。 -
background-color:设置视频播放器的背景颜色。在视频加载或未播放时显示。
-
controls:布尔属性,用于显示或隐藏视频播放器的控制条。设置为
true
时显示控制条,false
时隐藏。 -
autoplay:布尔属性,用于设置视频是否自动播放。设置为
true
时视频加载后自动播放。 -
loop:布尔属性,用于设置视频是否循环播放。设置为
true
时视频播放结束后自动重新开始。 -
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
组件的样式可以通过以下几种方式自定义:
-
布局属性:通过
width
、height
、margin
、padding
等属性调整视频播放器的尺寸和位置。 -
背景与边框:使用
background-color
、border-radius
、border-width
等属性设置播放器的背景色、圆角和边框样式。 -
控制栏样式:通过
controls
属性显示或隐藏默认控制栏,或使用自定义控制栏组件来替换默认样式。 -
播放器状态:利用
autoplay
、loop
、muted
等属性控制视频的自动播放、循环播放和静音状态。 -
响应式设计:通过媒体查询或
flex
布局,确保视频组件在不同设备上的适应性。
通过这些方式,开发者可以根据需求灵活定制video
组件的外观和行为。