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

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

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

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

场景：

使用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"],

}

]

原创不易，有用就关注一下。要是帮到了你就给个点赞吧，多谢支持。

觉得不错的小伙伴，记得帮我点个赞和关注哟，笔芯笔芯~**

有问题请留言或者私信，可以 WX搜索公众号：程序员漫话编程

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

基于FFmpeg开发视频播放器, 基本流程(一)
刚开始学习FFmpeg,用几篇文章记录下,使用ffmpeg开发一个简单的视频播放器,大概的过程.这里只讨论核心代码,如解封装,音频的解码播放,视频的解码播放,音视频同步,不涉及UI布局. 基于FFmp ...
typescript 从零开发视频播放器
typescript 从零开发视频播放器前言项目架构设计技术栈双端支持元素的显示和隐藏说明组件化开发组件之间的通讯拖拽行为初始化模板 video 标签组件控制器的显示和隐藏显示时 ...
python开发视频播放器_Python应用03 使用PyQT制作视频播放器实例
最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/Tk和QT.相比之下,我觉得PyQT使用起来更加方便,功能也相对丰富.这一篇用PyQT实现一个视频播放 ...
python开发视频播放器_Python使用PyQT制作视频播放器
最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/Tk和QT.相比之下,我觉得PyQT使用起来更加方便,功能也相对丰富.这一篇用PyQT实现一个视频播放 ...
python开发视频播放器_python视频播放器
广告关闭 100GB直播流量包仅需9.9元,10TB点播流量包仅需999元,参与活动还赠移动直播SDK,短视频SDK,小程序插件等,大促100%中奖率最近研究了python的两个gui包,tkint ...
pyglet -- 视频播放器（简单实现，效果不是太好，切换资源会卡死)（三）
实现一个简单的视频播放器,效果不是很好.这里不多说,直接贴代码了. 1 #-*- coding:gbk -*- 2 import pyglet 3 import os 4 from pyglet.gl ...
音视频开发第一课-使用C语言开发视频播放器 650元IT外包开发全程记录
界面设计目标效果: 创建MFC对话框项目,或者直接使用项目模板主要选择64位平台. 拖放控件设置播放器区域的背景把资源bg.bmp拷贝到项目目录的res目录下. 把bg.bmp添加当项目的资源 ...
只有你项目不到，Electron也可以开发视频播放器
一.桌面版视频播放器今天又发现一款强大的开源软件,electron 开发的一个可以播放国内主流视频(腾讯.爱奇艺.优酷.芒果.乐视)的播放器.而且播放视频可直接跳过广告.好的开源项目第一时间分享给大 ...
只有你想不到，Electron也可以开发视频播放器
## 一.桌面版视频播放器今天又发现一款强大的开源软件,electron 开发的一个可以播放国内主流视频(腾讯.爱奇艺.优酷.芒果.乐视)的播放器.而且播放视频可直接跳过广告.好的开源项目第一时间分 ...
Flash Builder 开发视频播放器客户端
基于 spark.components.VideoDisplay 进行视频播放器开发. 通过设置VideoDisplay对象的source属性,设置数据源,实现:本地视频播放.网络视频点播.网络视频直 ...

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

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

最新文章

热门文章