前言

本Demo基于JS UI实现视频播放。可以通过video自带的控制栏进行播放、暂停等操作。

过程

从以下地址下载代码

https://gitee.com/qinyunti/applications_app_samples

打开DevEco Studio 3.0.0.993

打开工程

更新

点击Run

有如下提示按图配置即可

代码分析

程序入口

src/main/js/MainAbility/app.js

布局

src/main/js/MainAbility/pages/index/index.hml

src/main/js/MainAbility/pages/index/index.css

代码

src/main/js/MainAbility/pages/index/index.js

import prompt from '@ohos.prompt';
  import router from '@ohos.router';

export default {
data: {
// 是否自动播放
autoplay: false,
// 视频地址
url: '/common/video/1.mp4',
// 是否显示控制栏
controlShow: true,
// 是否循环播放
loop: false,
// 播放开始时间
startTime: 0,
// 播放速度
speed: 0.3,
isStart: false
},
// 视频准备完成时触发该事件
prepared(e) {
this.showPrompt(this.$t('strings.video_duration') + e.duration + this.$t('strings.second'))
},
// 视频开始播放
start() {
this.showPrompt(this.$t('strings.video_start'))
this.isStart = true
},
// 视频暂停播放
pause() {
this.showPrompt(this.$t('strings.video_pause'))
this.isStart = false
},
// 视频播放完成
playFinish() {
this.$element('confirmDialog').show()
},
// 拖动进度条调用
playSeeked(e) {
this.showPrompt(this.$t('strings.video_seeked') + e.currenttime + this.$t('strings.second'))
},
// 播放进度变化调用
timeUpdate(e) {
},
// dialog确定
confirm() {
this.$element('video').start()
this.$element('confirmDialog').close()
},
// dialog取消
cancel() {
this.$element('confirmDialog').close()
},
// 弹框
showPrompt(msg) {
prompt.showToast({
message: msg,
duration: 1000
})
},
// 点击视频
onClick() {
if (this.isStart) {
this.$element('video').pause()
this.isStart = false
} else {
this.$element('video').start()
this.isStart = true
}
},
// 长按视频
longPress() {
router.replace({
url: 'pages/index/index'
})
}
}

视频文件位于/common/video/1.mp4可以替换。

总结

基于JS UI框架能快速开发视频播放应用，十分便捷。