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

2024-07-16 21:10:28 浏览数 (2)

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

场景：

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

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

1、实现思路

2、代码解析

3、实现效果

4、总结

一、实现思路

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

二、代码解析

1、hml文件

（1）添加视频播放组件video

（2）src设置视频路径 可以是本地也可以是在线

（3）autoplay设置视频默认是否播放

（4）设置视频播放的事件：播放，暂停，完成，错误，拖动等

代码语言：html复制
<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>

2、css文件

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

代码语言：arkts复制
.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();

代码语言：arkts复制
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。

设置屏幕支持横屏

代码语言：arkts复制
"abilities": [
{
"configChanges": ["orientation"],
}
]

写在最后