JS分布式流转基础学习

前言

使用鸿蒙JS端分布式方法去实现简单的视频流转功能

正文

1.创建鸿蒙JS端空项目

分布式拉起将文件命名为Distributrd，选择保存路径，选择API6或者API7，设备勾选Phonet，最后点击Finish按钮。

若用API7的话，需要把compatibleSdkVersion改为6（我们所使用的虚拟机版本为6）

2.添加权限

    "reqPermissions": [{"name": "ohos.permission.DISTRIBUTED_DATASYNC"}],

3.在MainAbility.java中动态调用权限

public class MainAbility extends AceAbility {@Overridepublic void onStart(Intent intent) {super.onStart(intent);//检测设备是否被授予多设备协同权限// 动态判断权限if (verifySelfPermission("ohos.permission.DISTRIBUTED_DATASYNC") != IBundleManager.PERMISSION_GRANTED) {// 应用未被授予权限if (canRequestPermission("ohos.permission.DISTRIBUTED_DATASYNC")) {// 是否可以申请弹框授权(首次申请或者用户未选择禁止且不再提示)  手机本身也会有禁止弹窗的服务，该if方法为是否可以进行弹窗requestPermissionsFromUser(new String[]{"ohos.permission.DISTRIBUTED_DATASYNC"}, 0);}}}@Overridepublic void onStop() {super.onStop();}
}

4.页面分布式拉起

在index.js中编写代码

我们书写一个点击事件方法来实现分布式流转，使用FeatureAbility.startAbility(OBJECT)方法拉起一个FA，无回调结果，允许以显式的方式，拉起远程或本地的FA。其中OBJECT是StartAbilityParameter类型方法，需要填写各项对应的系统能力如必填的bundleName（启动包名）、abilityName（启动的Ability名称），另外entities为用户需要流转的部分（我们该部分是流转的视频）

export default {data: {title: "0",event:'',seekingtime:'',timeupdatetime:'',seekedtime:'',isStart: true,duration: '',video:'/common/video/onepiece.mp4'},onInit() {},distributed(){let target = {bundleName: "com.example.distributed",abilityName: "com.example.distributed.MainAbility",video:this.video};let result = FeatureAbility.startAbility(target);},preparedCallback:function(e){ this.event = '视频连接成功'; this.duration = e.duration;},startCallback:function(){ this.event = '视频开始播放';},pauseCallback:function(){ this.event = '视频暂停播放'; },finishCallback:function(){ this.event = '视频播放结束';},errorCallback:function(){ this.event = '视频播放错误';},seekingCallback:function(e){ this.seekingtime = e.currenttime; },timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;},change_start_pause: function() {if(this.isStart) {this.$element('videoId').pause();this.isStart = false;} else {this.$element('videoId').start();this.isStart = true;}},
}

video组件编写可参考官网文档中心

5.效果展示

JS分布式流转基础学习相关推荐

webpack html转成js,WebPack的基础学习
Webpack Webpack 是一个前端的静态模块资源打包工具,能让浏览器也支持模块化.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. Webpack 核心主要 ...
vue.js路由配置vue-router的基础学习 - 概念篇
文章目录引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由引言 · ...
iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
Spark基础学习笔记04：搭建Spark伪分布式环境
文章目录零.本讲学习目标一.搭建伪分布式Hadoop (一)登录ied虚拟机 (二)配置免密登录 1.生成密钥对 2.将生成的公钥发送到本机(虚拟机ied) 3.验证虚拟机是否能免密登录本机 (三 ...
分布式基础学习（1）--分布式文件系统
分布式基础学习所谓分布式,在这里,很狭义的指代以Google的三驾马车,GFS.Map/Reduce.BigTable为框架核心的分布式存储和计算系统.通常如我一样初学的人,会以Google这几份经 ...
分布式基础学习【一】 —— 分布式文件系统
分布式基础学习所谓分布式,在这里,很狭义的指代以Google的三驾马车,GFS.Map/Reduce.BigTable为框架核心的分布式存储和计算系统.通常如我一样初学的人,会以Google这几份经 ...
两个读书笔记：springboot+vue.js分布式组件全栈开发训练营 + 大数据开发基础
(springboot+vue.js分布式组件全栈开发训练营原文在notion中, 大数据开发在思维导图中, 这个博客只是保存, 无法阅读. ) what is different between s ...
java学习_Python基础学习教程：从0学爬虫？让爬虫满足你的好奇心
Python基础学习教程:从0学爬虫?让爬虫满足你的好奇心有必要学爬虫吗? 我想,这已经是一个不需要讨论的问题了. 爬虫,"有用"也"有趣"! 这个数据为王的 ...
ElasticSearch基础学习
ElasticSearch基础学习一.全文检索基础 1.1.什么是全文检索 1.2.全文检索流程 1.3.相关概念 1.3.1.索引库 1.3.2.document对象 1.3.3. field对象 ...