前言

本Demo基于JS UI實(shí)現(xiàn)視頻播放，可以通過video自帶的控制欄進(jìn)行播放、暫停等操作。

過程

從以下地址下載代碼

https://gitee.com/qinyunti/applications_app_samples

打開DevEco Studio 3.0.0.993

打開工程：

更新：

點(diǎn)擊Run：

有如下提示按圖配置即可：

代碼分析

程序入口

src/main/js/MainAbility/app.js

（左右移動(dòng)查看全部?jī)?nèi)容）

布局

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

（左右移動(dòng)查看全部?jī)?nèi)容）

代碼

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

（左右移動(dòng)查看全部?jī)?nèi)容）

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


export default {
data: {
// 是否自動(dòng)播放
autoplay: false,
// 視頻地址
url: '/common/video/1.mp4',
// 是否顯示控制欄
controlShow: true,
// 是否循環(huán)播放
loop: false,
// 播放開始時(shí)間
startTime: 0,
// 播放速度
speed: 0.3,
isStart: false
},
// 視頻準(zhǔn)備完成時(shí)觸發(fā)該事件
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()
},
// 拖動(dòng)進(jìn)度條調(diào)用
playSeeked(e) {
this.showPrompt(this.$t('strings.video_seeked') + e.currenttime + this.$t('strings.second'))
},
// 播放進(jìn)度變化調(diào)用
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
})
},
// 點(diǎn)擊視頻
onClick() {
if (this.isStart) {
this.$element('video').pause()
this.isStart = false
} else {
this.$element('video').start()
this.isStart = true
}
},
// 長(zhǎng)按視頻
longPress() {
router.replace({
url: 'pages/index/index'
})
}
}

（左右移動(dòng)查看全部?jī)?nèi)容）

視頻文件位于/common/video/1.mp4可以替換。

總結(jié)

基于JS UI框架能狗開蘇卡法視頻播放應(yīng)用，十分便捷。

提示：本文由電子發(fā)燒友社區(qū)發(fā)布，轉(zhuǎn)載請(qǐng)注明以上來源。如需社區(qū)合作及入群交流，請(qǐng)?zhí)砑游⑿臙EFans0806，或者發(fā)郵箱liuyong@huaqiu.com。

更多熱點(diǎn)文章閱讀

• 鴻湖萬聯(lián)產(chǎn)品推薦官招募！啟鴻OpenHarmony開發(fā)板免費(fèi)體驗(yàn)
• 華為開發(fā)者大會(huì) 2022 亮點(diǎn)搶先看，新技術(shù)新體驗(yàn)等你探索！
• 全球首家支持OpenHarmony的3D引擎，Cocos Creator 3.6.1社區(qū)版發(fā)布
• 廣和通LTE Cat.1模組L610通過OpenHarmony兼容性測(cè)評(píng)
• 基于 Ubuntu 服務(wù)器安裝物聯(lián)網(wǎng)平臺(tái) ThingsBoard

END

就喜歡獎(jiǎng)勵(lì)一個(gè)“”和“在看”唄~