【Harmony OS】【ArkUI】ets開發 簡易視頻播放器
前言：這一次我們來使用ets的Swiper組件、List組件和Video組件製作一個簡易的視頻播放器。本篇是以HarmonyOS官網的codelab簡易視頻播放器（eTS）為基礎進行編寫。本篇最主要的內容就是一個主界面包括頂部的視頻海報輪播，中部的視頻播放列表，以及點擊海報和播放列表進入到播放界面完成視頻播放的功能。師傅領進門，修行在個人，所以本篇只講大概的組件使用，具體的細節和更詳細的屬性讀者自己在學習中摸索。相信通過這次的學習，你能有所收穫。希望能幫助你快速了解Harmony的ETS開發，學會簡單的視頻播放器製作學習。本篇最後會貼上參考原文鏈接。
首先講一下大致的思路，我們要在主界面頂部使用Swiper組件完成視頻海報輪播，下方使用List組件完成視頻播放的列表，點擊海報和播放列表進入視頻播放界面使用Video組件製作，其他的屬性就由讀者自行探索。
1. 構建主界面。
1) 在default文件夾中創建data、image、video文件夾，在data文件夾中創建VideoData.ets文件，用來定義電影輪播圖數組swiperVideos和視頻列表圖片數組horizontalVideos。Image文件夾中添加圖片，video文件夾中添加視頻，代碼中的文件路徑替換由讀者自行替換。
const localSource: string = "/common/video/video1.mp4";
const webSource: string = "//ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/93be3d88-9fc2-4fbd-bd14-833bca731ca7.mp4";
export const swiperVideos:any[] = [
{
"image":'/common/image/video_ad0.jpg',
"source":localSource
},
{
"image":'/common/image/video_ad1.jpg',
"source":localSource
},
{
"image":'/common/image/video_ad2.jpg',
"source":localSource
}
]
export const horizontalVideos:any[] = [
{
"image":'/common/image/video_list0.jpg',
"source":webSource
},
{
"image":'/common/image/video_list1.jpg',
"source":webSource
},
{
"image":'/common/image/video_list2.jpg',
"source":webSource
}
]
2) 在index.ets中引入router和swiperVideos、horizontalVideos。
import router from '@system.router';
import {swiperVideos,horizontalVideos} from '../common/data/VideoData.ets'
3) 在index.ets中添加Swiper組件用於顯示電影輪播圖，使用Navigator實現頁面跳轉。
@Entry
@Component
struct Index {
build() {
Column() {
Swiper() {
ForEach(swiperVideos, item => {
SwiperItem({ imageSrc: item.image, source: item.source })
}, item => item.image.toString())
}
.autoPlay(true)
.height(180)
.itemSpace(15)
}
.backgroundColor("#EEEEEE")
.padding({ left: 15, top: 15, right: 15, bottom: 15 })
}
}
@Component
struct SwiperItem {
private imageSrc: string
private source: string
build() {
Navigator({ target: 'pages/Play', type: NavigationType.Push }) {
Image(this.imageSrc).objectFit(ImageFit.Cover)
}
.params({ source: this.source })
}
}
4) 添加Flex組件用於顯示電影列表上方的文本信息，添加List組件用於顯示電影列表，使用router實現頁面跳轉。
@Entry
@Component
struct Index {
build() {
Column() {
...
Flex({ direction: FlexDirection.Row }) {
Text('Coming soon')
.fontSize(20).fontWeight(FontWeight.Bold).margin({ left: 10 })
Image('/common/image/next.png').height(8).width(16)
}
.margin({ top: 20, bottom: 15 })
List({ space: 15 }) {
ForEach(horizontalVideos, item => {
ListItem() {
HorizontalItem({ imageSrc: item.image, source: item.source })
}
}, item => item.image.toString())
}
// 設置列表橫向排列
.listDirection(Axis.Horizontal)
}
.backgroundColor("#EEEEEE")
.padding({ left: 15, top: 15, right: 15, bottom: 15 })
}
}
...
@Component
struct HorizontalItem {
private imageSrc: string
private source: string
build() {
Image(this.imageSrc)
.width('80%')
.height('25%')
.onClick(() => {
router.push({
uri: 'pages/Play',
params: { source: this.source }
})
})
}
}
5) 整個index.ets文件的代碼如下：
import router from '@system.router';
import {swiperVideos,horizontalVideos} from '../common/data/VideoData.ets'
@Entry
@Component
struct Index {
build() {
Column() {
//輪播組件
Swiper(){
ForEach(swiperVideos, item => {
SwiperItem({ imageSrc: item.image, source: item.source })
}, item => item.image.toString())
}
.autoPlay(true)
.height(180)
.itemSpace(15)
//文本信息
Flex({direction:FlexDirection.Row}){
Text('Coming soon')
.fontSize(20).fontWeight(FontWeight.Bold).margin({left:10})
Image('/common/image/Record.png').height(8).width(16)
}
.margin({top:20, bottom:15})
List({space:15}){
ForEach(horizontalVideos, item =>{
ListItem(){
HorizontalItem({imageSrc:item.image,source:item.source})
}
},item => item.image.toString())
}
.listDirection(Axis.Horizontal)
}
.backgroundColor("#EEEEEE")
.padding({ left: 15, top: 15, right: 15, bottom: 15 })
}
}
@Component
struct SwiperItem{
private imageSrc:string
private source:string
build(){
Navigator({target:'pages/Play',type:NavigationType.Push}){
Image(this.imageSrc).objectFit(ImageFit.Cover)
}
.params({source:this.source})
}
}
@Component
struct HorizontalItem{
private imageSrc:string
private source:string
build(){
Image(this.imageSrc)
.width('80%')
.height('25%')
.onClick(()=>{
router.push({
uri:'pages/Play',
params:{source:this.source}
})
})
}
}
6) 打開預覽器看一下效果：
欲了解更多更全技術文章，歡迎訪問//developer.huawei.com/consumer/cn/forum/?ha_source=zzh
