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"
            οnpause="onpause" onfinish="onfinish" οnerrοr="onerror" οnseeking="onseeking"
            οnseeked="onseeked" οntimeupdate="ontimeupdate" οnclick="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>

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;
}

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;
        }
    },
}

三，实现效果

四、总结

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

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"],
}
]

最后分享一份鸿蒙（HarmonyOS）开发学习指南需要的可以扫码免费领取！！！

《鸿蒙（HarmonyOS）开发学习指南》

第一章 快速入门

1、开发准备

2、构建第一个ArkTS应用（Stage模型）

3、构建第一个ArkTS应用（FA模型）

4、构建第一个JS应用（FA模型）

5、…

第二章 开发基础知识

1、应用程序包基础知识

2、应用配置文件（Stage模型）

3、应用配置文件概述（FA模型）

4、…

第三章 资源分类与访问

1、 资源分类与访问

2、 创建资源目录和资源文件

3、 资源访问

4、…

第四章 学习ArkTs语言

1、初识ArkTS语言

2、基本语法

3、状态管理

4、其他状态管理

5、渲染控制

6、…

第五章 UI开发

1.方舟开发框架（ArkUI）概述

2.基于ArkTS声明式开发范式

3.兼容JS的类Web开发范式

4…

第六章 Web开发

1.Web组件概述

2.使用Web组件加载页面

3.设置基本属性和事件

4.在应用中使用前端页面JavaScript

5.ArkTS语言基础类库概述

6.并发

7…

11.网络与连接

12.电话服务

13.数据管理

14.文件管理

15.后台任务管理

16.设备管理

17…

第七章 应用模型

1.应用模型概述

2.Stage模型开发指导

3.FA模型开发指导

4…

扫描下方二维码免费领取，《鸿蒙（HarmonyOS）开发学习指南》