0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿湖万联“竞”开发板:基于JS UI框架的视频播放应用

电子发烧友开源社区 来源:未知 2022-11-04 12:40 次阅读

前言

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

过程

从以下地址下载代码

https://gitee.com/qinyunti/applications_app_samples

打开DevEco Studio 3.0.0.993

6847ef58-5bf9-11ed-a3b6-dac502259ad0.png

打开工程:

68617b80-5bf9-11ed-a3b6-dac502259ad0.png

更新:

68955842-5bf9-11ed-a3b6-dac502259ad0.png

点击Run:

68b0dbe4-5bf9-11ed-a3b6-dac502259ad0.png

有如下提示按图配置即可:

693d9368-5bf9-11ed-a3b6-dac502259ad0.png

69612e7c-5bf9-11ed-a3b6-dac502259ad0.png

代码分析

程序入口

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。

更多热点文章阅读

END

想了解更多开源技术?后台留言,立刻安排!

就喜欢奖励一个“”和“在看”呗~


原文标题:鸿湖万联“竞”开发板:基于JS UI框架的视频播放应用

文章出处:【微信公众号:电子发烧友开源社区】欢迎添加关注!文章转载请注明出处。


声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙
    +关注

    关注

    57

    文章

    2342

    浏览量

    42821
  • OpenHarmony
    +关注

    关注

    25

    文章

    3715

    浏览量

    16257
  • 鸿湖万联
    +关注

    关注

    1

    文章

    67

    浏览量

    634

原文标题:鸿湖万联“竞”开发板:基于JS UI框架的视频播放应用

文章出处:【微信号:HarmonyOS_Community,微信公众号:电子发烧友开源社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    鸿亮相OpenHarmony人才生态大会2024

    近日,由开放原子开源基金会指导,OpenHarmony项目群工作委员会主办的OpenHarmony人才生态大会2024在武汉隆重举办。软通动力子公司鸿作为OpenHarmony项
    的头像 发表于 11-30 10:41 271次阅读

    原生鸿蒙发布!软通动力子公司鸿智能成果获媒体报道关注

    《新闻1+1》栏目以长达21分钟的专题报道,在该报道中,鸿多项技术创新成果得以亮相,广受业界瞩目。鸿
    的头像 发表于 10-29 15:51 308次阅读
    原生鸿蒙发布!软通动力子公司<b class='flag-5'>鸿</b><b class='flag-5'>湖</b><b class='flag-5'>万</b><b class='flag-5'>联</b>智能成果获媒体报道关注

    软通动力子公司鸿发布SwanLinkOS 5

    在近日圆满闭幕的首届H•I³ AI探索峰会上,软通动力凭借其深厚的技术实力与创新精神,在鸿蒙生态领域再次迈出坚实步伐。会上,软通动力携手子公司鸿,震撼发布了新一代操作系统——Sw
    的头像 发表于 09-04 16:50 821次阅读

    软通动力子公司鸿荣获矿鸿OSV生态合作伙伴授牌

    圆满举行。此次授牌旨在表彰和认可矿鸿生态圈内的优秀合作伙伴,激发矿鸿领域新动能。软通动力子公司鸿
    的头像 发表于 08-14 17:58 324次阅读
    软通动力子公司<b class='flag-5'>鸿</b><b class='flag-5'>湖</b><b class='flag-5'>万</b><b class='flag-5'>联</b>荣获矿<b class='flag-5'>鸿</b>OSV生态合作伙伴授牌

    软通动力旗下鸿荣获矿鸿OSV生态合作伙伴授牌

    近日,鄂尔多斯临港经济区见证了矿鸿OSV生态合作伙伴授牌仪式的隆重举行。在这场汇聚行业精英的盛会中,软通动力旗下的鸿作为首批矿
    的头像 发表于 08-14 14:50 561次阅读

    软通动力子公司鸿携多款重磅创新产品亮相华为开发者大会

    如何引领行业进步,共同探索鸿蒙生态与AI大模型的发展新契机。作为本次大会钻石级合作伙伴,软通动力携子公司鸿深度参与到大会各项活动中。软通动力董事、
    的头像 发表于 06-25 11:38 350次阅读
    软通动力子公司<b class='flag-5'>鸿</b><b class='flag-5'>湖</b><b class='flag-5'>万</b><b class='flag-5'>联</b>携多款重磅创新产品亮相华为<b class='flag-5'>开发</b>者大会

    软通动力子公司鸿获评首批华为矿鸿OSV伙伴

    产业的新技术、新产品、新工艺、新成果,助力煤炭全产业链实现转型突破,并打造一个专业化、国际化、市场化、高水平的煤炭及能源成果交流交易平台,以促进煤炭及能源产业的合作与发展。软通动力子公司鸿
    的头像 发表于 05-18 09:42 455次阅读
    软通动力子公司<b class='flag-5'>鸿</b><b class='flag-5'>湖</b><b class='flag-5'>万</b><b class='flag-5'>联</b>获评首批华为矿<b class='flag-5'>鸿</b>OSV伙伴

    鸿生态“加速跑” 软通动力子公司鸿荣膺华为“矿鸿生态使能合作伙伴”

    。在本次展会上,软通动力子公司鸿受邀参与了华为矿鸿生态论坛并做主题发言,还荣膺了华为“矿鸿
    的头像 发表于 04-02 15:43 562次阅读
    矿<b class='flag-5'>鸿</b>生态“加速跑” 软通动力子公司<b class='flag-5'>鸿</b><b class='flag-5'>湖</b><b class='flag-5'>万</b><b class='flag-5'>联</b>荣膺华为“矿<b class='flag-5'>鸿</b>生态使能合作伙伴”

    共谱开源新篇章 软通动力子公司鸿与鸿蒙生态服务公司签署战略合作协议

    近日,软通动力子公司鸿与鸿蒙生态服务(深圳)有限公司(以下简称“鸿蒙生态服务公司”)成功签署战略合作协议。双方将携手合作,加强资源互联互通,共同开拓开源鸿蒙应用场景和市场空间,推
    的头像 发表于 04-02 15:23 483次阅读
    共谱开源新篇章 软通动力子公司<b class='flag-5'>鸿</b><b class='flag-5'>湖</b><b class='flag-5'>万</b><b class='flag-5'>联</b>与鸿蒙生态服务公司签署战略合作协议

    人才储备再升级!软通动力子公司鸿多名讲师荣获首批“鸿蒙原生应用开发培训讲师”认证

    近日,由鸿蒙生态服务公司组织开展的国内首批“鸿蒙原生应用开发培训讲师”认证顺利完成。作为此次认证的重要参与者,鸿申报的四位鸿蒙资深专家
    的头像 发表于 03-25 10:25 615次阅读
    人才储备再升级!软通动力子公司<b class='flag-5'>鸿</b><b class='flag-5'>湖</b><b class='flag-5'>万</b><b class='flag-5'>联</b>多名讲师荣获首批“鸿蒙原生应用<b class='flag-5'>开发</b>培训讲师”认证

    软通动力子公司鸿多名讲师荣获首批“鸿蒙原生应用开发培训讲师”认证

    近日,由鸿蒙生态服务公司组织开展的国内首批“鸿蒙原生应用开发培训讲师”认证顺利完成。作为此次认证的重要参与者,鸿申报的四位鸿蒙资深专家
    的头像 发表于 03-25 09:24 440次阅读

    鸿亮相瑞芯微第八届开发者大会

    数千名开发者、合作伙伴以及行业专家共同探讨数智化未来。作为瑞芯微的重要生态合作伙伴,软通动力旗下的鸿受邀出席,并展示了多项前沿技术成果
    的头像 发表于 03-13 11:33 719次阅读

    软通动力子公司鸿战略签约鄂尔多斯工业互联网平台

    多方力量,旨在通过构建创新交流平台,凝聚智慧力量,进一步巩固鄂尔多斯市工业互联网建设成果,充分发挥矿鸿产业优势,加快工业互联网基础设施建设。软通动力子公司鸿
    的头像 发表于 01-22 13:57 535次阅读

    鸿携手合作伙伴共同推动鸿蒙生态繁荣

    近日,软通动力子公司鸿与鸿蒙生态服务(深圳)有限公司(以下简称“鸿蒙生态服务公司”)成功签署战略合作协议。这一合作标志着双方将携手共进,致力于推动鸿蒙生态的繁荣与商用落地。
    的头像 发表于 01-05 15:34 703次阅读

    鸿与鸿蒙生态服务公司达成战略合作

    近日,软通动力子公司鸿与鸿蒙生态服务(深圳)有限公司签署了具有深远影响的战略合作协议。此举标志着双方将携手共进,致力于加强资源互联互通,共同开拓开源鸿蒙的应用场景和市场空间。
    的头像 发表于 01-05 15:10 725次阅读