今天尝试用ArkTS应用开发语言为HarmonyOS NEXT搭建一个简易的短剧播放器原型。作为刚接触鸿蒙生态不久的开发者,记录下这个过程中的一些实践心得。
首先在DevEco Studio中创建了一个API12兼容的项目。ArkTS的静态类型检查确实能帮助规避不少运行时错误,这点比纯TS开发体验要好。基础页面结构采用声明式UI编写:
typescript
@Component
struct ShortVideoPlayer {
@state currentProgress: number = 0
@State isPlaying: boolean = false
private controller: VideoController = new VideoController()
build() {
Column() {
Video({
src: 'resource://base/media/short_drama.mp4',
controller: this.controller
})
.width('100%')
.aspectRatio(16/9)
ProgressBar({
value: this.currentProgress,
total: 100
}).margin(10)
Row() {
Button(this.isPlaying ? '暂停' : '播放')
.onClick(() => {
this.togglePlay()
})
}.justifyContent(FlexAlign.Center)
}
}
private togglePlay() {
if (this.isPlaying) {
this.controller.pause()
} else {
this.controller.start()
}
this.isPlaying = !this.isPlaying
}
}
这个简单实现包含了三个核心功能:
1. 视频组件的基础渲染
2. 播放/暂停状态切换
3. 进度条占位(实际项目需要绑定真实进度)
在HarmonyOS NEXT上测试时发现,VideoController的API与Android MediaPlayer有些差异,需要重新适应。比如准备状态监听改为了Promise形式:
typescript
async function prepareVideo() {
try {
await controller.prepare()
console.log('视频准备就绪')
} catch (err) {
console.error('视频加载失败:' + err)
}
}
遇到的一个小坑是:ArkTS要求明确声明组件状态变量的类型,不能依赖类型推断。比如@State isPlaying: boolean必须显式声明,不能只写@State isPlaying = false。
下一步计划加入:
1. 全屏切换功能
2. 手势控制进度
3. 多集切换列表
总体感觉HarmonyOS NEXT的视频能力已经比较完善,ArkTS的声明式UI写法也确实比命令式更简洁。不过在复杂动画处理上还需要继续摸索。如果有更资深的鸿蒙开发者看到这篇笔记,欢迎指正不足之处。
首先在DevEco Studio中创建了一个API12兼容的项目。ArkTS的静态类型检查确实能帮助规避不少运行时错误,这点比纯TS开发体验要好。基础页面结构采用声明式UI编写:
typescript
@Component
struct ShortVideoPlayer {
@state currentProgress: number = 0
@State isPlaying: boolean = false
private controller: VideoController = new VideoController()
build() {
Column() {
Video({
src: 'resource://base/media/short_drama.mp4',
controller: this.controller
})
.width('100%')
.aspectRatio(16/9)
ProgressBar({
value: this.currentProgress,
total: 100
}).margin(10)
Row() {
Button(this.isPlaying ? '暂停' : '播放')
.onClick(() => {
this.togglePlay()
})
}.justifyContent(FlexAlign.Center)
}
}
private togglePlay() {
if (this.isPlaying) {
this.controller.pause()
} else {
this.controller.start()
}
this.isPlaying = !this.isPlaying
}
}
这个简单实现包含了三个核心功能:
1. 视频组件的基础渲染
2. 播放/暂停状态切换
3. 进度条占位(实际项目需要绑定真实进度)
在HarmonyOS NEXT上测试时发现,VideoController的API与Android MediaPlayer有些差异,需要重新适应。比如准备状态监听改为了Promise形式:
typescript
async function prepareVideo() {
try {
await controller.prepare()
console.log('视频准备就绪')
} catch (err) {
console.error('视频加载失败:' + err)
}
}
遇到的一个小坑是:ArkTS要求明确声明组件状态变量的类型,不能依赖类型推断。比如@State isPlaying: boolean必须显式声明,不能只写@State isPlaying = false。
下一步计划加入:
1. 全屏切换功能
2. 手势控制进度
3. 多集切换列表
总体感觉HarmonyOS NEXT的视频能力已经比较完善,ArkTS的声明式UI写法也确实比命令式更简洁。不过在复杂动画处理上还需要继续摸索。如果有更资深的鸿蒙开发者看到这篇笔记,欢迎指正不足之处。