HarmonyOS: 鸿蒙开发视频播放器，真简单！_鸿蒙开发的视频播放器

现在这个直播时代，能开发一个视频播放也是很不错了，在鸿蒙里面开发视频播放 就是简单。

场景：

使用video组件，实现本地视频和在线视频播放，可以实现状态栏显示，横屏全屏播放，显示播放时间和总时间，点击屏幕实现暂停和播放。

下面我们开始今天的文章，还是老规矩，通过如下几点来说：

1、实现思路
2、代码解析
3、实现效果
4、总结

一、实现思路

添加一个video组件用于视频播放的操作，设置屏幕显示的宽高，设置全屏播放，通过点击事件设置视频的播放和暂停。

二、代码解析

1、hml文件

（1）添加视频播放组件video
（2）src设置视频路径 可以是本地也可以是在线
（3）autoplay设置视频默认是否播放
（4）设置视频播放的事件：播放，暂停，完成，错误，拖动等

<div class="container">
    <text class="text">本地视频播放：</text>
    <video id='videoId' class="videoStyle" src='/common/video/button.mp4' muted='false'
           autoplay='true' controls="true" onprepared="onprepared" onstart="onstart"
            onpause="onpause" onfinish="onfinish" onerror="onerror" onseeking="onseeking"
            onseeked="onseeked" ontimeupdate="ontimeupdate" onclick="change_start_pause">
    </video>
    <text class="text">网络视频播放：</text>
    <video id='videoId' class="videoStyle" src='http://static.video.qq.com/TPout.swf?vid=a1400po96pp' muted='false'
           autoplay='true' controls="true">
    </video>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

2、css文件

（1）设置视频的默认宽高videoStyle

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.text{
    font-size: 20px;
    color: chocolate;
    font-weight: bold;
    margin: 20px;
}
.videoStyle {
    width: 100%;
    height: 200px;
    object-fit: fill;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3、js文件

（1）onstart(){ // 播放时触发该事件
（2）onpause(){ // 暂停时触发该事件
（3）onfinish(){ // 播放结束时触发该事件
（4）onerror(){ // 播放失败时触发该事件
（5）onseeking(e){ // 操作进度条过程时上报时间信息
（6）change_start_pause是视频的点击事件，通过设置状态判断 点击视频状态和点击后是否播放和暂停状态

this.$element(‘videoId’).pause();

this.$element(‘videoId’).start();

import prompt from '@system.prompt';
export default {
    data: {
        title: 'World',
        isStart: true,
    },
    onprepared(e){ // 视频准备完成时触发该事件
        prompt.showToast({
            message:"准备就绪："+e.duration,
            duration:3000
        })
    },
    onstart(){ // 播放时触发该事件
        prompt.showToast({
            message:"播放开始",
            duration:3000
        })
    },
    onpause(){ // 暂停时触发该事件
        prompt.showToast({
            message:"播放暂停",
            duration:3000
        })
    },
    onfinish(){ // 播放结束时触发该事件
        prompt.showToast({
            message:"播放结束",
            duration:3000
        })
    },
    onerror(){ // 播放失败时触发该事件
        prompt.showToast({
            message:"播放失败",
            duration:3000
        })
    },
    onseeking(e){ // 操作进度条过程时上报时间信息
        prompt.showToast({
            message:"onseeking 拖动时间：" + e.currenttime,
            duration:3000
        })
    },
    onseeked(e){ // 操作进度条完成后，上报播放时间信息
        prompt.showToast({
            message:"onseeked 时间：" + e.currenttime,
            duration:3000
        })
    },
    ontimeupdate(e){ // 播放进度变化时触发该事件
    },
    change_start_pause: function() {
        if(this.isStart) {
            this.$element('videoId').pause();
            this.isStart = false;
        } else {
            this.$element('videoId').start();
            this.isStart = true;
        }
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

三，实现效果

四、总结

为了便于有些属性，样式，参数大家看着不太清晰，这里总结一下。

video 视频播放组件

属性

1、muted 视频是否静音播放。,
2、src 播放视频内容的路径。
3、autoplay 视频是否自动播放。,
4、controls 控制视频播放的控制栏是否显示，如果设置为false，则不显示控制栏。默认为true，由系统决定显示或隐藏控制栏。
5、object-fit 视频源的缩放类型，如果poster设置了值，那么此配置还会影响视频海报的缩放类型，可选值参考表 object-fit 类型说明。object-fit 类型说明 fill 不保持宽高比进行放大缩小，使得图片填充满显示边界。

事件

1、prepared 视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。
2、start 播放时触发该事件。
3、pause 暂停时触发该事件。,
4、finish 播放结束时触发该事件。
5、error 播放失败时触发该事件。,
6、seeking 操作进度条过程时上报时间信息，单位为s。,
7、seeked 操作进度条完成后，上报播放时间信息，单位为s。
8、timeupdate 播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。

方法

1、start 请求播放视频。,
2、pause 请求暂停播放视频。
3、setCurrentTime 指定视频播放的进度位置，单位为s。

设置屏幕支持横屏

"abilities": [
{
"configChanges": ["orientation"],
}
]
1
2
3
4
5

为了能让大家更好的学习鸿蒙 (OpenHarmony) 开发技术，这边特意整理了《鸿蒙 (OpenHarmony)开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙 (OpenHarmony)开发学习手册》

入门必看：https://qr21.cn/FV7h05

1. 应用开发导读(ArkTS)
2. ……

HarmonyOS 概念：https://qr21.cn/FV7h05

1. 系统定义
2. 技术架构
3. 技术特性
4. 系统安全

如何快速入门？：https://qr21.cn/FV7h05

1. 基本概念
2. 构建第一个ArkTS应用
3. 构建第一个JS应用
4. ……

开发基础知识：https://qr21.cn/FV7h05

1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……