• Home
Name Date Size #Lines LOC

..--

AppScope/06-May-2025-3633

VideoComponent/06-May-2025-1,1871,080

entry/06-May-2025-856701

hvigor/06-May-2025-2422

screenshots/devices/06-May-2025-

.gitignoreD06-May-202579 66

README_zh.mdD06-May-20253 KiB6651

build-profile.json5D06-May-20251.1 KiB4645

hvigorfile.jsD06-May-2025168 21

hvigorwD06-May-20252.1 KiB6428

hvigorw.batD06-May-20252 KiB7356

oh-package.json5D06-May-2025798 2725

ohosTest.mdD06-May-20251.1 KiB1210

README_zh.md

1# 媒体库视频
2
3### 介绍
4
5本示例使用[Video组件](https://docs.openharmony.cn/pages/v4.1/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-media-components-video.md)展示了视频组件的基本功能,包括视频组件化,全屏化,窗口化,上下轮播视频等。
6
7### 效果预览
8|首页|弹窗|视频|直播|
9|------|--------|-------|---------|
10|![home](screenshots/devices/video.png)|![play1](screenshots/devices/small_video.png)|![play1](screenshots/devices/full.png)|![play1](screenshots/devices/live_video.png)|
11
12使用说明:
131. 进入首页点击播放按键;
142. 点击视频播放按钮,视频开始播放,再次点击视频进入视频全屏页;
153. 首页下滑500vp后,视频小窗口化;
164. 点击直播按钮进入直播页,上下滑动视频。
17
18### 目录结构
19```
20VideoComponent/src/main/ets/components
21|---mock
22|   |---LiveData.ets                            // mock直播弹幕数据
23|---model
24|   |---LiveDataModel.ets                       // 弹幕数据结构
25|---net
26|   |---Utils.ets
27|---pages
28|   |---CommentPage.ets                         // 评论页面
29|   |---FullPage.ets                            // 全屏播放视频页
30|   |---LivePage.ets                            // 直播页面
31|   |---MainPage.ets                            // 首页
32|   |---SmallVideo.ets                          // 小窗口
33|   |---VideoPage.ets                           // 视频播放页
34```
35### 具体实现
36  + 视频播放:start方法视频开始播放,源码参考[VideoPage.ets](VideoComponent/src/main/ets/components/pages/VideoPage.ets);
37  + 全屏播放:再次点击视频进入全屏播放页面,使用setCurrentTime参数设定当前播放时间,pause方法停止播放,源码参考[FullPage.ets](VideoComponent/src/main/ets/components/pages/FullPage.ets);
38  + 小窗口播放:记录当前播放时间,小窗口页面渲染之前设置视频当前播放时间,页面滚动到固定距离开始展示组件;
39  + 直播:使用[http](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-network-kit/js-apis-http.md)接口的request方法获取直播数据,代码参考[Utils.ets](VideoComponent/src/main/ets/components/net/Utils.ets);
40
41### 相关权限
42
43[ohos.permission.INTERNET](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissioninternet)
44
45### 依赖
46
47不涉及。
48
49### 约束与限制
50
511.本示例仅支持标准系统上运行,支持设备:RK3568。
52
532.本示例已适配API version 9版本SDK,版本号:3.2.11.9。
54
553.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)及以上版本才可编译运行。
56
57### 下载
58如需单独下载本工程,执行如下命令:
59```
60git init
61git config core.sparsecheckout true
62echo code/BasicFeature/Media/VideoShow/ > .git/info/sparse-checkout
63git remote add origin https://gitee.com/openharmony/applications_app_samples.git
64git pull origin master
65```
66