HarmonyOS开发案例：【视频播放器】
介绍
基于video、swiper和slider组件，实现简单的视频播放器，可支持海报轮播、视频播放等功能。
相关概念
- [video组件]：视频播放组件。
- [swiper组件]：滑动容器，提供切换子组件显示的能力。
- [slider组件]：滑动z条组件，用来快速调节设置值，如音量、亮度等。
环境搭建
软件要求
- [DevEco Studio]版本：DevEco Studio 3.1 Release及以上版本。
- OpenHarmony SDK版本：API version 9及以上版本。
硬件要求
- 开发板类型：[润和RK3568开发板]。
- OpenHarmony系统：3.2 Release及以上版本。
环境搭建
完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：
- [获取OpenHarmony系统版本]：标准系统解决方案（二进制）。以3.2 Release版本为例：
- 搭建烧录环境。
- [完成DevEco Device Tool的安装]
- [完成RK3568开发板的烧录]
- 搭建开发环境。
代码结构解读
本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在gitee中提供。、
HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿
├──entry/src/main/js // 代码区
│ └──MainAbility
│ ├──common
│ │ ├──constant
│ │ │ └──commonConstants.js // 公共常量类
│ │ ├──images // 图片文件
│ │ └──video
│ │ └──video.mp4 // 视频文件
│ ├──i18n
│ │ ├──en-US.json // 英文国际化
│ │ └──zh-CN.json // 中文国际化
│ ├──pages
│ │ ├──homePage
│ │ │ ├──homePage.css // 主页面样式
│ │ │ ├──homePage.hml // 主页面
│ │ │ └──homePage.js // 主页面逻辑
│ │ └──videoPage
│ │ ├──videoPage.css // 播放页面样式
│ │ ├──videoPage.hml // 播放页面
│ │ └──videoPage.js // 播放页面逻辑
│ └──app.js // 程序入口
└──entry/src/main/resource // 应用静态资源目录
主页面
主页面分为轮播图区域和滑动图区域两部分，效果如图所示：
轮播图使用swiper组件自动播放轮播图片，点击图片跳转到视频播放页面。
< !-- homePage.hml -- >
< div class="container" >
< swiper class="swiper" id="swiper" index="0" autoplay='true' indicator="true"
loop="true" digital="false" >
< image class="swiper-img" src="{{ swiperVideos[0] }}" onclick="playVideo" >< /image >
< image class="swiper-img" src="{{ swiperVideos[1] }}" onclick="playVideo" >< /image >
< image class="swiper-img" src="{{ swiperVideos[2] }}" onclick="playVideo" >< /image >
< /swiper >
...
< /div >
// homePage.js
export default {
data: {
swiperVideos: [],
...
},
// 初始化数据
onInit() {
...
},
// 跳转到视频播放页面
playVideo() {
router.push({
url: CommonConstants.PLAY_PAGE
});
},
};
滑动图区域分为最近播放和为你推荐两部分，使用List组件进行纵向排列；最近播放和为你推荐中的图片使用List组件进行横向排列，可滑动图片，点击图片跳转到播放页面。
< !-- homePage.hml -- >
< div class="container" >
...
< div class="horizontal-area" >
< list class="todo-wrapper" >
< list-item for="{{ horizontal_description }}" class="todo-item" clickeffect="false" >
< div class="horizontal-area-div" >
< text class="horizontal-area-description" >{{ $item }}< /text >
< list class="todo-wrapper" >
< list-item for="{{ horizontal_videos }}" clickeffect="false" class="todo-item" >
< div class="image-area" onclick="playVideo" >
< image src="{{ $item.image }}" >< /image >
< text >{{ $item.name }}< /text >
< /div >
< /list-item >
< /list >
< /div >
< /list-item >
< /list >
< /div >
< /div >
// homePage.js
export default {
data: {
...
horizontal_description: [],
horizontal_videos: []
},
// 初始化数据
onInit() {
...
},
// 跳转到视频播放页面
playVideo() {
router.push({
url: CommonConstants.PLAY_PAGE
});
},
};
视频播放页面
视频播放页面主要分为标题栏、视频播放区域和进度条三个部分，效果如图所示：
标题栏包括返回图标和“视频”字样。
< !-- videoPage.hml -- >
< div class="container" >
< div class="title" >
< image src="{{ playIcons.backSrc }}" onclick="back" >< /image >
< text >{{ $t('strings.play') }}< /text >
< /div >
...
< /div >
// videoPage.js
export default {
data: {
playIcons: {},
...
},
// 初始化数据
onInit() {
this.playIcons = CommonConstants.PLAY_ICONS;
...
},
...
};
当视频暂停时，视频区域展示暂停图标；当视频播放时，视频区域暂停图标隐藏，效果如图所示：
< !-- videoPage.hml -- >
< div class="container" >
...
< video id="video" ... >< /video >
< image class="play-image" show="{{ !isPlay }}" src="{{ playIcons.publicPlayIcon }}" >< /image >
...
< /div >
// videoPage.js
export default {
data: {
playIcons: {},
...
src: '',
...
isPlay: false,
...
},
// 初始化数据
onInit() {
this.playIcons = CommonConstants.PLAY_ICONS;
this.src = CommonConstants.VIDEO_SRC;
},
...
};
进度条分为播放/暂停图标和进度条（进度条左边为当前视频播放时间，进度条右边为视频总时长）两部分。
< div class="container" >
...
< div class="progress" >
< div class="image-div" >
< image src="{{ isPlay ? playIcons.pauseIcon : playIcons.playIcon }}" onclick="startOrPause" >< /image >
< /div >
< div class="slider-div" >
< text class="now-time" >
{{ nowTime }}
< /text >
< slider min="{{ sliderMin }}" max="{{ sliderMax }}" value="{{ sliderValue }}"
mode="outset" onchange="change" >< /slider >
< text class="duration-time" >
{{ durationTime }}
< /text >
< /div >
< /div >
< /div >
// videoPage.js
export default {
data: {
playIcons: {},
...
sliderMin: 0,
sliderMax: 100,
sliderValue: 0,
nowTime: '00:00',
duration: 0,
durationTime: '00:00',
isPlay: false,
secondUnit: 60,
zero: '0',
initTime: '00:00',
paddingLen: 2,
milliSeconds: 1000,
...
},
// 初始化数据
onInit() {
this.playIcons = CommonConstants.PLAY_ICONS;
...
},
...
};
视频播放逻辑
视频播放器可设置是否静音播放、视频路径、是否自动播放、是否显示控制栏、是否循环播放等属性。
< !-- index.hml -- >
< video id="video"
muted="{{ muted }}"
src="{{ src }}"
autoplay="{{ autoplay }}"
controls="{{ controlShow }}"
loop="{{ loop }}"
...
>
< /video >
// index.js
data: {
...
videoId: 'video', // 播放器id
muted: false, // 是否静音播放
src: '', // 视频地址
autoplay: true, // 是否自动播放
controlShow: false, // 是否显示控制栏
loop: false, // 是否循环播放
...
},
视频加载完成后获取视频总时长，当视频开始播放后获取视频当前播放时间（单位：秒）并更新进度条的值；拖动进度条可设置视频播放位置，点击播放/暂停图标可对视频进行控制。
< !-- index.hml -- >
< video id="video"
...
onprepared="prepared"
onstart="start"
onpause="pause"
onfinish="finish"
ontimeupdate="timeUpdate" >
< /video >
...
< div class="progress" >
< div class="imageDiv" >
< image src="{{ isPlay ? playIcons.pauseIcon : playIcons.playIcon }}" onclick="startOrPause" >< /image >
< /div >
< div class="sliderDiv" >
...
< slider min="{{ sliderMin }}" max="{{ sliderMax }}" value="{{ sliderValue }}"
mode="outset" onchange="change" >< /slider >
...
< /div >
< /div >
// index.js
...
// 视频准备完成
prepared(event) {
this.duration = event.duration;
this.durationTime = this.secondToTime(event.duration);
},
// 视频开始播放
start() {
this.isPlay = true;
},
// 视频暂停播放
pause() {
this.isPlay = false;
},
// 视频播放完成
finish() {
setTimeout(() = > {
this.nowTime = this.initTime;
this.sliderValue = this.sliderMin;
}, this.milliSeconds);
},
// 播放进度变化
timeUpdate(event) {
if ((this.currentTime != -1) && (this.currentTime !== event.currenttime)) {
return;
}
this.currentTime = -1;
let currSliderValue = event.currenttime / this.duration * this.sliderMax;
this.sliderValue = ((this.sliderValue > currSliderValue) ? this.sliderValue : currSliderValue);
let currTime = this.sliderValue * this.duration / this.sliderMax;
this.nowTime = this.secondToTime(Math.round(currTime));
},
// 暂停或播放
startOrPause() {
if (this.isPlay) {
this.$element(this.videoId).pause();
} else {
this.$element(this.videoId).start();
}
},
// 拖动进度条
change(event) {
this.sliderValue = event.progress;
this.currentTime = Math.round(this.duration * event.progress / this.sliderMax);
this.$element(this.videoId).setCurrentTime({
currenttime: this.currentTime
});
},
...
审核编辑 黄宇
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。
举报投诉
-
鸿蒙
+关注
关注
55文章
2257浏览量
42324 -
HarmonyOS
+关注
关注
79文章
1941浏览量
29577 -
OpenHarmony
+关注
关注
24文章
3500浏览量
15482
发布评论请先 登录
相关推荐
在(Linux)ubuntu下通过GTK调用libvlc开发视频播放器
本项目实现了一个基于GTK和libvlc的视频播放器。使用GTK创建GUI界面，使用libvlc播放视频。用户可以通过选择视频文件，然后启动
灵活电影播放器视频/音频播放软件
东京，2008年4月24日--瑞萨科技公司（Renesas Techno logy Corp.）今天宣布，推出为采用移动电话SH-Mobile*1应用处理器的嵌入式系统开发的灵活电影播放器
发表于 03-06 19:52
HarmonyOS应用开发-视频播放
了HarmonyOS应用开发E2E体验，学到了：如何创建一个HarmonyOS Demo Project如何构建一个Hap并且将其部署到真机在HarmonyOS上如何使用
发表于 09-11 17:25
HarmonyOS IoT 硬件开发案例分享
``许思维老师HiSpark Wi-Fi IoT 开发案例分享：案例一：AHT20温湿度传感器开发、调试；案例二：oled屏驱动库移植，调试；案例三：用OLED屏播放
发表于 10-27 17:30
基于HarmonyOS ets开发的简易视频播放器
这是我们使用HarmonyOS的codelab简易视频播放器的codelab简易播放器。内容就是一个主视频界面，包括顶部的
发表于 04-18 10:41
flv视频播放器代码
flv视频播放器代码
FlV视频播放器代码
代码如下这里只是介绍几个例子，现在把代码公布一下，大家可以参考着做，也可以把你喜欢的视频连接
发表于 01-10 12:36
•1996次阅读
工商网监
评论