华为 HarmonyOS NEXT 原生应用开发: Video实现在线离线视频播放、以及实现控制器控制视频操作。

视频播放

一、基础使用（在线、离线）

代码示例：

/*** 视频演示*/
@Entry
@Component
struct PayIndex {build() {Column() {Tabs() {TabContent() {Video({src: "http://video19.ifeng.com/video09/2024/05/23/p7199260608686989961-0-122707.mp4"}).width("90%").height("60%").borderRadius(15).autoPlay(true)}.tabBar("在线视频")TabContent() {Video({src: $rawfile("harmonyos_next_video.mp4")}).width("90%").height("60%").borderRadius(15).autoPlay(true)}.tabBar("离线视频")}}.width("100%").height("100%").justifyContent(FlexAlign.Center)}
}

二、自定义video 视频播放

代码示例：

/*** 演示，自定义实现视频播放功能*/
@Entry
@Component
struct PayIndex {// 创建视频组件控制器controllerVideo: VideoController = new VideoController()@State isFullScreen: boolean = false  // 是否全屏@State isMuted: boolean = false  // 是否静音@State SelectedSpeed: ResourceStr = "1"  // 用于默认展示选择的倍速@State currentIndex: number = 0  // 当前选择的倍速索引@State playTime: number = 0 // 当前播放的时长@State duration: number = 0  // 视频加载完毕的总时长build() {Column({ space: 10}) {Video({// 视频来源（在线 / 离线）src: $rawfile("harmonyos_next_video.mp4"),// video控制器controller: this.controllerVideo,// 控制倍速播放（搭配 Select选项值使用）currentProgressRate: this.SelectedSpeed.toString(),// 设置视频封面previewUri: $r("app.media.banner_pic2"),}).borderRadius(15).width("100%").height(500).objectFit(ImageFit.Contain) // 控制展示的宽高比例方式.autoPlay(false)   // 自动播放.loop(true)    // 循环播放.controls(this.isFullScreen)   // 是否展示控制条.muted(this.isMuted)   // 静音播放.onFullscreenChange((screen) => {  // 控制全屏播放// 事件监听视频是否全屏的状态，返回Boolean值，将这个值赋值给状态变量，然后实现全屏出现控制器this.isFullScreen = screen.fullscreen})// 实时获取当前播放进度（实时触发）.onUpdate((time) => {this.playTime = time.time})// 视频加载完毕触发（获取视频总时长）.onPrepared((totalTime) => {this.duration = totalTime.duration})// -----------------------------------Row() {Button("播放").onClick(() => {this.controllerVideo.start()})Button("暂停").onClick(() => {this.controllerVideo.pause()})Button("停止").onClick(() => {this.controllerVideo.stop()})Button("全屏").onClick(() => {this.controllerVideo.requestFullscreen(true)})Button("静音").onClick(() => {this.isMuted = ! this.isMuted})// 调整倍速Select([{value: "1"}, {value: "1.25"}, {value: "1.5"}, {value: "1.75"}, {value: "2"}]).selected(this.currentIndex).value($$this.SelectedSpeed).onSelect((index) => {this.currentIndex = index})}.width("100%").justifyContent(FlexAlign.SpaceEvenly)// 进度控制条Row({ space: 15 }) {Text("进度")Slider({value: this.playTime,  // 当前播放进度min: 0,   // 视频最小值max: this.duration  // 视频总时长}).layoutWeight(1)// 滑块滑动触发回调，返回当前滑块所处的值，我们通过video控制器控制视频的播放进度.onChange((value) => {this.controllerVideo.setCurrentTime(value, SeekMode.Accurate)})// 展示当前播放时长和总时长Text(){Span(this.playTime + "/" + this.duration)}}.width("100%")}.width("100%").height("100%").justifyContent(FlexAlign.Center).padding(10)}
}