当前位置：首页 > news >正文

鸿蒙模块的创建+Video简单使用

news 来源：原创 2025/5/22 11:19:37

新建公共模块 common 导出并引入使用

DevEco Studio 编辑器（以下统称编辑器）左上角切到项目
在项目最上层的项目名字右键->新建->模块
选择 Shared Library，取名 common，供其他模块使用，不要 static（给其他项目使用的第三方模块）
在 common 模块下新建文件夹 constants 和文件 UIConstants.ets，src/main/ets/constants/UIConstants.ets
UIConstants 是一些静态变量，在文件 UIConstants.ets 导出它 export class UIConstants{...}
在 common/Index.ets 这个文件再导出 export { UIConstants } from './src/main/ets/constants/UIConstants'
假如我要在 entry 主入口模块使用 UIConstants
在 entry/oh-package.json5 中引入 UIConstants，{ "dependencies": { 'common': 'file:../common' } }
在 entry/pages/Index.ets 里使用 import { UIConstants } from 'common'
在编辑器最上面那行里面，运行/调试配置，选择 entry->Deploy Multi Hap，勾选 Deploy Multi Hap Packages，看看 Module 里面是不是包含了 common 模块，没有就选上，不然打包会忽略 common 模块

简单使用 Video

假如是视频要联网，记得申请互联网访问权限

{"module": {"requestPermissions": [{"name": "ohos.permission.INTERNET" //系统授予级权限：互联网访问，用于访问网络视频}]}
}

//向其它模块共享“用户界面”相关常量
export class UIConstants {//颜色相关常量static readonly COLOR_WHITE = "#FFFFFF";static readonly COLOR_GRAY_LIGHTER = "#D7D7D7";static readonly COLOR_GRAY_LIGHT = "#AAAAAA";static readonly COLOR_GRAY = "#666666";static readonly COLOR_GRAY_DARK = "#333333";static readonly COLOR_GRAY_DARKER = "#1B1B1B";static readonly COLOR_BLACK = "#000000";static readonly COLOR_BLUE = "#096DD9";static readonly COLOR_BLUE_LIGHT = "#84B6EC";static readonly COLOR_BLUE_LIGHTER = "#DAE9F9";static readonly COLOR_RED = "#F5232E";static readonly COLOR_ORANGE = "#F8B865";static readonly COLOR_BROWN = "#AD6800";static readonly COLOR_YELLOW = "#FFFF00";//字体相关常量static readonly FONT_XS = 10; //Extra Smallstatic readonly FONT_SM = 12; //Smallstatic readonly FONT_MD = 14; //Mediumstatic readonly FONT_LG = 16; //Largestatic readonly FONT_XL = 20; //Extra Large//间距相关常量static readonly SPACE_ROW_XS = 5;static readonly SPACE_ROW_SM = 8;static readonly SPACE_ROW_MD = 10;static readonly SPACE_ROW_LG = 13;static readonly SPACE_ROW_XL = 16;static readonly SPACE_COL_XS = 4;static readonly SPACE_COL_SM = 6;static readonly SPACE_COL_MD = 9;static readonly SPACE_COL_LG = 11;static readonly SPACE_COL_XL = 14;//边框相关常量static readonly BORDER_WIDTH_SM = 1;static readonly BORDER_WIDTH_MD = 2;static readonly BORDER_WIDTH_LG = 3;static readonly BORDER_RADIUS_SM = 3;static readonly BORDER_RADIUS_MD = 6;static readonly BORDER_RADIUS_LG = 9;//系统相关常量static readonly STATUS_BAR_HEIGHT = 45; //系统顶部状态栏高度static readonly NAVIGATION_BAR_HEIGHT = 29; //系统底部导航栏高度//更多...
}

代码里有些 svg 图自己去补充吧

import { window } from '@kit.ArkUI'
import { UIConstants } from 'common'@Extend(Text)
function qsText(fs: number = UIConstants.FONT_MD, fc: string = UIConstants.COLOR_WHITE) {.fontSize(fs).fontColor(fc)
}@Entry
@Component
struct Index {@State videoSrc: Resource = $rawfile('dj.mp4') // 本地视频// @State videoSrc:string = 'https://www.****.com/res/0.mp4' // 云端视频@State posterSrc: string = ''@State videoTitle: string = 'Axure RP9教程：手把手教你制作视频案例'vc: VideoController = new VideoController()@Watch('watchPlaying') @State isPlaying: boolean = false //当前是否正在播放// @State playProgress: number = 0   //视频的播放进度，此处的0代表0%@State videoDuration: number = 0 //视频的总时长，单位是秒钟！不是毫秒！@State videoPlayedTime: number = 0 //视频已经播放的时长，单位是秒钟！不是毫秒！//当前页面即将显式时，设置全屏+横屏显式async aboutToAppear() {let w = await window.getLastWindow(getContext())w.setWindowLayoutFullScreen(true) //全屏显式// w.setPreferredOrientation(window.Orientation.PORTRAIT) //设置首选的屏幕方向：肖像画（竖屏）w.setPreferredOrientation(window.Orientation.LANDSCAPE) //设置首选的屏幕方向：风景画（横屏）}//监视isPlaying的改变watchPlaying() {if (this.isPlaying) {this.vc.start()} else {this.vc.pause()}}//把秒钟数字转化为字符串，例如： 109 => 01:49secondsToString(sec: number) {let minutes = Math.floor(sec / 60)let minuteString = minutes < 10 ? '0' + minutes : '' + minuteslet seconds = sec % 60let secondString = seconds < 10 ? '0' + seconds : '' + secondsreturn minuteString + ':' + secondString}build() {RelativeContainer() {//F1: 视频播放组件： Video 或 XComponentVideo({src: this.videoSrc, //指定视频源，可以是本地视频文件或服务器端视频文件previewUri: this.posterSrc, //视频尚未播放时呈现的海报/预览图controller: this.vc, //视频控制器}).objectFit(ImageFit.Contain)//视频尺寸包含在屏幕内(不会出现截断现象).controls(false)//是否显式默认自带的播放控件.onPrepared((e) => {console.log('--视频已经就绪(已经从服务器端缓存了一定时长，可以开始播放了)', JSON.stringify(e))this.videoDuration = e.duration}).onUpdate((e) => {console.log('--播放进度更新中', JSON.stringify(e))this.videoPlayedTime = e.time})//F2: 顶部标题栏： Row > Image+TextRow() {Image('/images/back.svg').width(11)Text(this.videoTitle).qsText(UIConstants.FONT_XL).margin({left: UIConstants.SPACE_ROW_XL}).layoutWeight(1) //布局权重为1，即占用父组件所有的剩余空间Image('/images/more.svg').fillColor(UIConstants.COLOR_WHITE).width(30)}.margin({top: UIConstants.SPACE_COL_XL}).padding({left: UIConstants.SPACE_ROW_XL * 2,right: UIConstants.SPACE_ROW_XL * 2,})//F3: 播放/暂停控制按钮Image(this.isPlaying ? '/images/pause2.svg' : '/images/play2.svg').width(53).alignRules({middle: { anchor: '__container__', align: HorizontalAlign.Center },center: { anchor: '__container__', align: VerticalAlign.Center }}).onClick(_ => {this.isPlaying = !this.isPlaying})//F4: 底部播放控制条Row() {Text(this.secondsToString(this.videoPlayedTime)).qsText()Row() { //使用一个父元素包裹 进度条 + 小圆饼Progress({value: this.videoPlayedTime, //进度条已播放进度就是已播放时长total: this.videoDuration     //进度条总长设置为视频的总时长}).color(UIConstants.COLOR_ORANGE)//已经经过的进度条颜色.backgroundColor(UIConstants.COLOR_WHITE) //整个进度条的背景色Row() {}.width(14).height(14).borderRadius('50%').backgroundColor(UIConstants.COLOR_WHITE).position({left: `${100 * this.videoPlayedTime / this.videoDuration}%`, //注意：此处不能直接使用字符串+拼接top: -5})}.layoutWeight(1).margin({left: UIConstants.SPACE_ROW_MD})Text(this.secondsToString(this.videoDuration)).qsText().margin({left: UIConstants.SPACE_ROW_MD})Text('高清').qsText().margin({left: UIConstants.SPACE_ROW_LG})Image('/images/zoomin.svg').width(17).margin({left: UIConstants.SPACE_ROW_XL})}.alignRules({bottom: { anchor: '__container__', align: VerticalAlign.Bottom }}).margin({bottom: UIConstants.SPACE_COL_XL}).padding({left: UIConstants.SPACE_ROW_XL * 2,right: UIConstants.SPACE_ROW_XL * 2,})}.width('100%').height('100%')}
}