今時今日，不管是大人，還是小孩，都喜歡刷視頻，生活中刷視頻的 APP 也多得是，如：抖音，快手，視頻號，今日頭條，火山…數也不數不清了。

然而華為論壇鴻蒙版塊搞活動，做一個屬于自己的視頻應用，說真的，看到這個活動我很開心，又可以用所學的鴻蒙知識來做一個小應用了！

看了小提示，都是 JS 組件來實現的，當我看到分布式也可以用 JS 來寫時，當時覺得 JS 也太強大了，因為之前寫的 Demo 都是用 Java 來寫分布式的。

本人工作也是從事 Java 后臺開發，對于 JS 前端知識，也就是入門級水平，然后就在想是用 Java 來寫這個視頻應用，還是用 JS 來寫呢。

通過看了 JS 參考 API 實例后，決定使用 JS 來寫，簡單易懂，同時也希望現在還在觀望鴻蒙應用開發的前端開發人員，不要怕自己不會 Java 開發，而一直在觀望，沒有踏出第一步來寫 Demo。

我寫的這個視頻應用取名為“愛視頻” ，99% 是用 JS 前端知識完成的，只有 1% 的 Java 代碼是復制過來的，也就是動態授權代碼，所以希望還在觀望的前端開發者，就從這個愛視頻 APP 開始你們的第一個鴻蒙應用吧！

實現效果

創建工程

在這當作你已經安裝好最新版本 DevEco-Studio 開發工具，點擊 File→New→New Project…彈出 Create HarmonyOS Project 窗口。

這里我選擇空白 JS 模板創建，寫界面還是 JS 比較方便些，對于有一定前端知識的小伙伴來說。

主界面開發

在展示源代碼之前，先介紹一下使用到了 JS 哪些組件：

• 滑動容器（swiper）

• 視頻播放（video）

• 可滑動面板（panel）

• 列表組件（list）

• 圖片組件（image）

• 文本組件（text）

• 交互式組件（input）

• 按鈕組件（button）

通過查看 JS API 參考文檔，就可以做出你喜歡的視頻應用了。

先介紹簡單的1% Java 代碼，如果之前做過分布式 Demo，直接復制過來就可以使用：

Java 代碼：

publicclassMainAbilityextendsAceAbility{
@Override
publicvoidonStart(Intentintent){
super.onStart(intent);
//動態判斷權限
if(verifySelfPermission("ohos.permission.DISTRIBUTED_DATASYNC")!=IBundleManager.PERMISSION_GRANTED){
//應用未被授予權限
if(canRequestPermission("ohos.permission.DISTRIBUTED_DATASYNC")){
//是否可以申請彈框授權(首次申請或者用戶未選擇禁止且不再提示)
requestPermissionsFromUser(newString[]{"ohos.permission.DISTRIBUTED_DATASYNC"},0);
}
}
}

@Override
publicvoidonStop(){
super.onStop();
}
}

HML 代碼（重要界面布局文件）：

<divclass="container">
<swiperclass="swiper"id="swiper"index="{{continueAbilityData.currentIndex}}"indicator="false"loop="true"digital="false"vertical="true"onchange="changeSwiper">
<divclass="swiperContent">
<videoid='videoOne'src='{{continueAbilityData.videoList[0]}}'muted='false'autoplay='true'ontimeupdate='timeupdateCallback'style="object-fit:fill;width:100%;height:100%;"controls="false"onclick="change_start_pause_one"loop='true'starttime='{{ontinueAbilityData.timeupdatetime}}'>video>
div>
<divclass="swiperContent">
<videoid='videoTwo'src='{{continueAbilityData.videoList[1]}}'muted='false'autoplay='false'ontimeupdate='timeupdateCallback'style="object-fit:fill;width:100%;height:100%;"controls="false"onclick="change_start_pause_two"loop='true'starttime='{{ontinueAbilityData.timeupdatetime}}'>video>
div>
<divclass="swiperContent">
<videoid='videoThree'src='{{continueAbilityData.videoList[2]}}'muted='false'autoplay='false'ontimeupdate='timeupdateCallback'style="object-fit:fill;width:100%;height:100%;"controls="false"onclick="change_start_pause_three"loop='true'starttime='{{continueAbilityData.timeupdatetime}}'>video>
div>
swiper>
<divclass="btn-footer">
<imageclass="comment-iconicon"src="/common/army_icon.jpg">image>
<textclass="footer-label">#HarmonyOS挑戰賽第二期#text>
<imageclass="comment-icon"src="/common/share.png"onclick="tryContinueAbility">image>
<imageclass="comment-icon"src="/common/bxs-message.png"onclick="showPanel">image>
div>
<panelid="simplepanel"type="foldable"mode="half"miniheight="400px">
<divclass="panel-div">
<listclass="todo-wrapper">
<list-itemfor="{{continueAbilityData.todolist}}"class="todo-item">
<imageclass="todo-icon"src="/common/avatar04.png">image>
<textclass="todo-title">{{$item.title}}text>
list-item>
list>
<divclass="inner-btn">
<inputid="input"class="input"type="text"value="{{continueAbilityData.comment}}"maxlength="20"enterkeytype="send"placeholder="請輸入評論內容"onchange="changeValue"onenterkeyclick="enterkeyClick"style="margin-right:10px;">input>
<buttontype="capsule"value="關閉"onclick="closePanel">button>
div>
div>
panel>
div>

JS 代碼（重要邏輯代碼，各組件事件）：

//@ts-nocheck
importappfrom'@system.app';
exportdefault{
data:{
img:"resources/media/pic_tv.png",
continueAbilityData:{
currentIndex:0,
videoList:[
"/common/000001.mp4",
"/common/000002.mp4",
"/common/000003.mp4"
],
timeupdatetime:2,
isStart:true,
todolist:[
{title:'HDC2021活動門票進行中'},
{title:'我期待HarmonyOS生態越來越完善'},
{title:'HarmonyOS你值得擁有'}],
comment:''
}
},
onInit(){
},
changeSwiper(e){
console.info("onRestoreData:changeSwiper");
this.switchPlay(e.index);
},
switchPlay(index){
console.info("onRestoreData:onShow<>"+index);
this.continueAbilityData.currentIndex=index;
if(index==0){
this.$element('videoOne').start();
this.$element('videoTwo').pause();
this.$element('videoThree').pause();
console.info("onRestoreData:videoOne<>start"+this.$element('videoOne').starttime);
}elseif(index==1){
this.$element('videoOne').pause();
this.$element('videoTwo').start();
this.$element('videoThree').pause();
console.info("onRestoreData:videoTwo<>start"+this.$element('videoTwo').starttime);
}elseif(index==2){
this.$element('videoOne').pause();
this.$element('videoTwo').pause();
this.$element('videoThree').start();
console.info("onRestoreData:videoThree<>start"+this.$element('videoThree').starttime);
}
},

//流轉事件
tryContinueAbility:asyncfunction(){
//應用進行遷移
letresult=awaitFeatureAbility.continueAbility();
console.info("result:"+JSON.stringify(result));
},
onStartContinuation(){
//判斷當前的狀態是不是適合遷移
console.info("onStartContinuation");
returntrue;
},
onCompleteContinuation(code){
//遷移操作完成，code返回結果
console.info("CompleteContinuation:code="+code);
app.terminate();

},
onSaveData(saveData){
//數據保存到savedData中進行遷移。
vardata=this.continueAbilityData;
console.info("onSaveData:"+JSON.stringify(data));
Object.assign(saveData,data)
},
onRestoreData(restoreData){
console.info("onRestoreData:"+JSON.stringify(restoreData));
//收到遷移數據，恢復。
this.continueAbilityData=restoreData;

varcurrentIndex=this.continueAbilityData.currentIndex;
varcurrentTime=this.continueAbilityData.timeupdatetime;

this.$element('videoOne').pause();
this.$element('videoTwo').pause();
this.$element('videoThree').pause();

this.$element('videoOne').starttime=currentTime;
this.$element('videoTwo').starttime=currentTime;
this.$element('videoThree').starttime=currentTime;

this.switchPlay(currentIndex);
},

//評論事件
showPanel(){
this.$element('simplepanel').show()
},
closePanel(){
this.$element('simplepanel').close()
},
changeValue(e){
this.continueAbilityData.comment=e.value;
},
enterkeyClick(e){
this.continueAbilityData.todolist.push({title:this.continueAbilityData.comment});
this.continueAbilityData.comment="";
},
timeupdateCallback:function(e){this.continueAbilityData.timeupdatetime=e.currenttime;},
change_start_pause_one:function(){
if(this.continueAbilityData.isStart){
this.$element('videoOne').pause();
this.continueAbilityData.isStart=false;
}else{
this.$element('videoOne').start();
this.continueAbilityData.isStart=true;
}
},
change_start_pause_two:function(){
if(this.continueAbilityData.isStart){
this.$element('videoTwo').pause();
this.continueAbilityData.isStart=false;
}else{
this.$element('videoTwo').start();
this.continueAbilityData.isStart=true;
}
},
change_start_pause_three:function(){
if(this.continueAbilityData.isStart){
this.$element('videoThree').pause();
this.continueAbilityData.isStart=false;
}else{
this.$element('videoThree').start();
this.continueAbilityData.isStart=true;
}
}
}

CSS 代碼（重要化妝技術）：

.container{
width:100%;
height:100%;
flex-direction:column;
}

.img{
object-fit:cover;
background-color:#808080;
}

.swiper{
flex-direction:column;
align-content:center;
align-items:center;
width:100%;
height:100%;
background-color:black;
}
.swiperContent{
height:100%;
justify-content:center;
background-color:black;
}

.btn-footer{
height:60px;
line-height:60px;
width:100%;
background-color:black;
flex-direction:row;
}
.footer-label{
font-size:16px;
color:white;
padding-top:0px;
flex-weight:1;
line-height:20px;
}
.comment-icon{
width:32px;
height:32px;
margin:8px;
}
.icon{
border-radius:16px;
}

.panel-div{
flex-direction:column;
align-content:center;
align-items:center;
width:100%;
height:100%;
}
.inner-btn{
height:70px;
padding:10px;
}
.todo-wrapper{
width:100%;
height:100%;
}
.todo-item{
width:100%;
height:30px;
padding-left:10px;
padding-right:10px;
}
.todo-icon{
width:16px;
height:16px;
margin-top:10px;
margin-right:10px;
}
.todo-title{
width:100%;
height:100%;
text-align:left;
font-size:14fp;
}

代碼就寫到此了，不要忘記了 config.json 文件的權限配置哦，在 module 下添加：

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

總結

說實存的，當看到這個活動時間才幾天時，感覺時間不太夠用，要滑動視頻，要評論功能，要分布式的，加上都是用空閑時間來做的，然而當深入去理解相關組件用法后，發現應該一天時間就可以了。

有興趣的小伙伴可以下載源碼查看，項目代碼寫得還不算靚仔，很多為了實現效果，都是 Hardcode 的。

有空可以把重復代碼抽出來，視頻源也可以放到服務器上，然后就可以更愉快的刷更多視頻了，源碼同步到 gitee 碼云，項目素材沒有上傳，自行添加。

源碼在這：

https://gitee.com/army16/qin-hong-jun-video