源码
import { display, window } from '@kit.ArkUI';
@Entry
@Component
struct Index {
controller: VideoController = new VideoController() //video控制器
@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X; //播放倍数
@State curRateName: number = 1; //设置默认播放倍数 用于页面展示文字内容
@State isAutoPlay: boolean = true //自动播放
@State isStart: boolean = false //播放状态 开始
@State showControls: boolean = false//是否展示video自带控件
@State videoSrc: Resource = $rawfile('video1.mp4') //默认视频路径
@State previewUri: Resource = $r('app.media.poster1') //默认视频播放预览图片
@State videoIndex: number = 0; //当前播放视频索引
@State isFullscreen: boolean = false //是否全屏状态
// 视频信息列表
@State VideoList: Array<videoInfo> = [
new videoInfo($rawfile('video1.mp4'), $r('app.media.poster1')),
new videoInfo($rawfile('video2.mp4'), $r('app.media.poster2')),
new videoInfo($rawfile('video3.mp4'), $r('app.media.poster3')),
new videoInfo($rawfile('video4.mp4'), $r('app.media.poster4'))
]
// 播放倍数list
@State PlaybackSpeedList: Array<backSpeedInfo> = [
new backSpeedInfo(0.75, PlaybackSpeed.Speed_Forward_0_75_X),
new backSpeedInfo(1, PlaybackSpeed.Speed_Forward_1_00_X),
new backSpeedInfo(1.25, PlaybackSpeed.Speed_Forward_1_25_X),
new backSpeedInfo(1.75, PlaybackSpeed.Speed_Forward_1_75_X),
new backSpeedInfo(2, PlaybackSpeed.Speed_Forward_2_00_X)
]
// 获取主窗口实例
windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;
// 获取主窗口的方式
mainWin: window.Window = this.windowStage.getMainWindowSync();
@State videoHeight: string = '27%' //video高度 ，竖屏
@State isSHowCurRateList: boolean = false //是否显示播放倍数列表
@State isMute: boolean = false //静音
@State videoDuration: string = '0' //video总时长
@State totalTime: number = 0 //进度条总时长
@State videoDurationEnd: string = '00:00' //进度条倒计时
@State ProgressTotal: number = 0 //进度条value转换使用的video总时长
@State ProgressValue: number = 0 //进度条完成进度
@State ProgressValueFormat: number = 0//进度条完成进度value转换使用的进度条完成
@State isLandSpace: boolean = false //是否横屏状态 用于设置vide及控件宽度
@State isShowVideoControls: boolean = false //是否显示自定义控件
//设置横屏、竖屏
setWindowFullscreen() {
// 获取最上层窗口的方式
window.getLastWindow(getContext(this));
if (this.isFullscreen) {
this.videoHeight = '100%'
//横屏
this.mainWin.setPreferredOrientation(window.Orientation.LANDSCAPE);
this.isLandSpace = true
} else {
this.videoHeight = '27%'
//竖屏
this.mainWin.setPreferredOrientation(window.Orientation.PORTRAIT);
this.isLandSpace = false
}
// 使用display接口获取当前旋转方向，可以放置在监听中持续获取
display.getDefaultDisplaySync().rotation;
}
//点击上下按钮时获取video信息
getVideo(type: string) {
this.isStart = false
this.controller.stop()
if (type === 'left') {
this.videoIndex--
} else {
this.videoIndex++
}
this.VideoList.forEach((item: videoInfo, index) => {
if (this.videoIndex === index) {
this.videoSrc = item.videoSrc
this.previewUri = item.previewUri
}
})
this.isAutoPlay = true
this.isStart = true
}
//计算时间
getDuration(Time: number) {
let seconds = Time;
let hours = Math.floor(seconds / 3600);
let minutes = Math.floor((seconds % 3600) / 60);
let remainingSeconds = seconds % 60;
let hour = hours === 0 ? '' : hours > 9 ? hours : '0' + hours
let min = minutes === 0 ? '00' : minutes > 9 ? minutes : '0' + minutes
let seco = remainingSeconds === 0 ? '00' : remainingSeconds > 9 ? remainingSeconds : '0' + remainingSeconds
let time = hour !== '' ? `${hour}:` : ''
return `${time}${min}:${seco}`
}
//UI界面
build() {
Column() {
Stack() {
Video({
src: this.videoSrc, //文件路径
currentProgressRate: this.curRate, //视频播放倍速。number取值仅支持：0.75，1.0，1.25，1.75，2.0。
previewUri: this.previewUri, //视频未播放时的预览图片路径
controller: this.controller, //设置视频控制器，可以控制视频的播放状态。
})
.width('100%')
.height('100%')
.autoPlay(this.isAutoPlay)
.controls(this.showControls)
.onPrepared((e) => {
this.totalTime = e.duration
this.videoDuration = this.getDuration(e.duration)
this.ProgressTotal = this.totalTime
})
.onUpdate((e) => {
this.videoDurationEnd = this.getDuration(Number(this.totalTime) - Number(e.time))
this.ProgressValue = Number(e.time)
})
Column() {
Row() {
Text(this.videoDuration)
.fontSize(12)
.fontColor('#fff')
.width(this.isLandSpace ? '5%' : '12%')
.textAlign(TextAlign.Center)
Row() {
Progress({ value: this.ProgressValue, total: this.ProgressTotal, type: ProgressType.Linear })
.width('100%')
.backgroundColor('rgba(248, 247, 247, 0.51)')
}
.width(this.isLandSpace ? '90%' : '76%')
Text(this.videoDurationEnd)
.fontSize(12)
.fontColor('#fff')
.width(this.isLandSpace ? '5%' : '12%')
.margin({ left: 5 })
}
.width('100%')
.padding({ top: 5 })
Row() {
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Row() {
Image($r('app.media.previous')).width(25).height(25)
.onClick(() => {
this.getVideo('left')
})
Image(!this.isStart ? $r('app.media.start') : $r('app.media.stop')).width(20).height(20)
.margin({ left: 10, right: 10 })
.onClick(() => {
if (!this.isStart) {
//开始播放
this.controller.start()
this.isStart = true
} else {
//暂停播放，显示当前帧，再次播放时从当前位置继续播放。
this.controller.pause()
this.isStart = false
}
})
Image($r('app.media.next')).width(20).height(20)
.onClick(() => {
this.getVideo('right')
})
Image(!this.isMute ? $r('app.media.no_mute') : $r('app.media.mute')).width(20).height(20)
.margin({ left: 10, right: 10 })
.onClick(() => {
this.isMute = !this.isMute
})
Text(`${this.curRateName}x`)
.width(50)
.height(25)
.fontSize(14)
.fontColor('#fff')
.margin({ left: 20, right: 15 })
.onClick(() => {
this.isSHowCurRateList = !this.isSHowCurRateList
})
if (this.isSHowCurRateList) {
List() {
ForEach(this.PlaybackSpeedList, (item: backSpeedInfo) => {
ListItem() {
Text(`${item.name}`)
.fontSize(15)
.fontColor('#fff')
.textAlign(TextAlign.Center)
.width('100%')
.onClick(() => {
this.curRate = item.curRate
this.curRateName = item.name
this.isSHowCurRateList = false
})
}
})
}
.width(40)
.height(100)
.margin({ left: -70, top: -140 })
.backgroundColor('rgba(12, 12, 12, 0.5)')
.padding(5)
}
}
Image(!this.isFullscreen ? $r('app.media.cancel_big_window') : $r('app.media.big_window'))
.width(25)
.height(25)
.onClick(() => {
if (!this.isFullscreen) {
this.isFullscreen = true
} else {
this.isFullscreen = false
}
this.setWindowFullscreen()
})
}
}
.width('100%')
.height('13%')
}
.height('100%')
.padding({ left: 10, right: 10 })
.justifyContent(FlexAlign.End)
.visibility(this.isShowVideoControls ? Visibility.Visible : Visibility.None)
}
.height(this.videoHeight)
.onClick(() => {
this.isShowVideoControls = !this.isShowVideoControls
console.log('isShowVideoControls',this.isShowVideoControls)
})
}
.height('100%')
}
}
//为video定义的class类
export class videoInfo {
videoSrc: Resource;
previewUri: Resource;
constructor(videoSrc: Resource, previewUri: Resource) {
this.videoSrc = videoSrc
this.previewUri = previewUri
}
}
export class backSpeedInfo {
name: number;
curRate: PlaybackSpeed;
constructor(name: number, curRate: PlaybackSpeed) {
this.name = name
this.curRate = curRate
}
}