前言

本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框架能狗開蘇卡法視頻播放應用，十分便捷。

提示：本文由電子發燒友社區發布，轉載請注明以上來源。如需社區合作及入群交流，請添加微信EEFans0806，或者發郵箱liuyong@huaqiu.com。

更多熱點文章閱讀

• 鴻湖萬聯產品推薦官招募！啟鴻OpenHarmony開發板免費體驗
• 華為開發者大會 2022 亮點搶先看，新技術新體驗等你探索！
• 全球首家支持OpenHarmony的3D引擎，Cocos Creator 3.6.1社區版發布
• 廣和通LTE Cat.1模組L610通過OpenHarmony兼容性測評
• 基于 Ubuntu 服務器安裝物聯網平臺 ThingsBoard

END

想了解更多開源技術？后臺留言，立刻安排！

就喜歡獎勵一個“”和“在看”唄~