鸿蒙应用开发视频播放功能,真简单!!! 原创 精华

发布于 2022-8-2 07:43
浏览
2收藏

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

 

至于说到 很多人说不知道怎么入手,其实不管学啥开发 去学进行,每天一点点,一个月后看结果或者你就不一样了。

 

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

 

场景:

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

 

三,实现效果
  鸿蒙应用开发视频播放功能,真简单!!!-开源基础软件社区

四,总结

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

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

原创不易,有用就关注一下。要是帮到了你 就给个点赞吧,多谢支持。
觉得不错的小伙伴,记得帮我 点个赞和关注哟,笔芯笔芯~**

有问题请留言或者私信。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-8-2 07:43:42修改
3
收藏 2
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐