一、介绍
基于鸿蒙Next模拟视频播放，正常播放与全屏播放
二、场景需求
大多数视频播放器都会有一个全屏按钮，通常位于视频播放窗口的右下角。点击该按钮可以进入全屏模式
三、业务步骤
第一步：准备好播放的视屏，点击左下方播放按钮，播放视频
第二部：中间可以暂停或者开始
第三步：可以拖动进度条
第三步：可以点击右下角放大icon，进行全屏播放，或者恢复正常播放
四、效果展示
五：代码展示：
import promptAction from '@ohos.promptAction'
import { videoSlider } from "../view/videoSlider"@Entry
@Component
struct VideoPlayer {@State videoSrc: string = '/common/videos/v1.mp4'@State videoImg: string = '/common/videos/img1.png'@State videoTitle: string = "视频标题"@State isSupport: boolean = false@State currentProgressRate: number = 1@State isPlay: boolean = false; //是否播放视频@State isAmplify: boolean = false; //是否放大@State progressVal: number = 0; //@State outSetValueOne: string = "0"; //视频时常@State startTime: string = "00:00"; //开始时间@State endTime: number = 0; //结束时间@State endStringTime: string = "00:00"; //结束时间@State currentTime: number = 0; //当前时间private controller: VideoController = new VideoController(); // 视频控制器//当前页面销毁onPageHide() {this.controller.pause();}build() {Column() {if (this.isAmplify){//视频内容-全屏Column() {Video({src: this.videoSrc,previewUri: this.videoImg,currentProgressRate:this.currentProgressRate,controller: this.controller}).width("100%").height("92%").controls(false).autoPlay(false).objectFit(ImageFit.Contain).loop(false)//播放时触发该事件。.onStart(() => {})//暂停时触发该事件。.onPause(() => {})//播放结束时触发该事件。.onFinish(() => {this.isPlay = false})//播放失败时触发该事件。.onError(() => {promptAction.showToast({message:"播放失败"})})//视频准备完成时触发该事件。duration：当前视频的时长，单位为秒(s)。.onPrepared((e) => {let d_ = e.durationthis.endTime = d_;let min: number = Number.parseInt((d_ / 60).toString());let second: number = d_ % 60;let m = min < 10 ? `${'0'}${min}` : min;let s = second < 10 ? `${'0'}${second}` : second;this.endStringTime = `${m}${':'}${s}`;})//操作进度条过程时上报时间信息。time：当前视频播放的进度，单位为s。.onSeeking((e) => {})//操作进度条完成后，上报播放时间信息。time：当前视频播放的进度，单位为s。.onSeeked((e) => {})//播放进度变化时触发该事件。time：当前视频播放的进度，单位为s。.onUpdate((e) => {if (e) {this.currentTime = e.time;let second: number = this.currentTime % 60;let min: number = Number.parseInt((this.currentTime / 60).toString());let start_m = min < 10 ? `${'0'}${min}` : min;let start_s = second < 10 ? `${'0'}${second}` : second;this.startTime = `${start_m}${':'}${start_s}`;}})//在全屏播放与非全屏播放状态之间切换时触发该事件。fullscreen：返回值为true表示进入全屏播放状态，为false则表示非全屏播放.onFullscreenChange(() => {})Blank()videoSlider({startTime:$startTime,endTime:$endTime,endStringTime:$endStringTime,currentTime: $currentTime,isPlay:$isPlay,isAmplify:$isAmplify,isSupport:$isSupport,controller: this.controller,})Blank()}.width("100%").height("100%").backgroundColor(0x999999)}else {//视屏内容Column() {Video({src: this.videoSrc,previewUri: this.videoImg,currentProgressRate:this.currentProgressRate,controller: this.controller}).height(383).controls(false).autoPlay(false).objectFit(ImageFit.Contain).loop(false)//播放时触发该事件。.onStart(() => {})//暂停时触发该事件。.onPause(() => {})//播放结束时触发该事件。.onFinish(() => {this.isPlay = false})//播放失败时触发该事件。.onError(() => {promptAction.showToast({message:"播放失败"})})//视频准备完成时触发该事件。duration：当前视频的时长，单位为秒(s)。.onPrepared((e) => {let d_ = e.durationthis.endTime = d_;let min: number = Number.parseInt((d_ / 60).toString());let second: number = d_ % 60;let m = min < 10 ? `${'0'}${min}` : min;let s = second < 10 ? `${'0'}${second}` : second;this.endStringTime = `${m}${':'}${s}`;})//操作进度条过程时上报时间信息。time：当前视频播放的进度，单位为s。.onSeeking((e) => { })//操作进度条完成后，上报播放时间信息。time：当前视频播放的进度，单位为s。.onSeeked((e) => {})//播放进度变化时触发该事件。time：当前视频播放的进度，单位为s。.onUpdate((e) => {if (e) {this.currentTime = e.time;let second: number = this.currentTime % 60;let min: number = Number.parseInt((this.currentTime / 60).toString());let start_m = min < 10 ? `${'0'}${min}` : min;let start_s = second < 10 ? `${'0'}${second}` : second;this.startTime = `${start_m}${':'}${start_s}`;}})//在全屏播放与非全屏播放状态之间切换时触发该事件。fullscreen：返回值为true表示进入全屏播放状态，为false则表示非全屏播放.onFullscreenChange(() => {})//进度条videoSlider({startTime:$startTime,endTime:$endTime,endStringTime:$endStringTime,currentTime: $currentTime,isPlay:$isPlay,isAmplify:$isAmplify,isSupport:$isSupport,controller: this.controller,})}.width("100%").height("100%").justifyContent(FlexAlign.Center)}}.width('100%').height('100%')}
}