鸿蒙应用开发：视频播放器，真简单！！！

最新推荐文章于 2024-06-21 14:59:29 发布

沉默的闪客

最新推荐文章于 2024-06-21 14:59:29 发布

阅读量2.5k

点赞数 1

分类专栏：鸿蒙应用开发入门到进阶文章标签： harmonyos 华为鸿蒙

本文链接：https://blog.csdn.net/jianpengxuexikaifa/article/details/126130826

版权

鸿蒙应用开发入门到进阶专栏收录该内容

27 篇文章 58 订阅

订阅专栏

昨天问同事有没有看鸿蒙发布会，都说看了（技术人都关注的鸿蒙），但是他们没有真正的了解鸿蒙的开发和鸿蒙系统，耳听为虚实操起来才感受到好不好，我建议他们都入门一下，系统源码下下来看看，毕竟国产系统，并且还是很强大的，几年时间发展这么快，可以说是前所未有吧。

至于说到很多人说不知道怎么入手，其实不管学啥开发去学进行，每天一点点，一个月后看结果吧。

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

场景：

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

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

1，实现思路

2，代码解析

3，实现效果

3，总结

一，实现思路

添加一个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>

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

三，实现效果