[[429579]]

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

效果圖

原始控件效果圖：

修改后的效果圖：

看過了演示效果，接下來講解如何開發(fā)。

開發(fā)部分

在開發(fā)之前，我們要先翻閱文檔，了解系統(tǒng)提供的能力。

我們從屬性、事件、方法中可以得出，以現(xiàn)在提供的能力，完全可以重寫視頻的控制欄。

接下來就是界面的構(gòu)思和布局：

界面布局

1. 整體布局

整體界面分為：視頻播放、視頻列表、評論區(qū)三大部分。

所以我們代碼上先構(gòu)建三個div。

2.video區(qū)域布局

想要把控制欄覆蓋到video上面我們就需要借助stack組件，如下圖：

視頻控制欄我們分為上下兩個部分，所以需要構(gòu)建兩個div來包裹里面控件，如下圖：

再往下就是控制欄上細(xì)節(jié)上的控件了，包括文字、按鈕、滑動條等，在此就不進(jìn)行贅述了。

3.視頻列表區(qū)域及評論區(qū)域

視頻列表區(qū)域和評論區(qū)域排版相對比較簡單，一個標(biāo)題欄將顯示區(qū)域進(jìn)行分割，再一個list列表顯示內(nèi)容。

評論區(qū)域則多一欄評論功能，其結(jié)構(gòu)排版如圖：

整個排版結(jié)構(gòu)大致介紹完畢，以下為hml頁面的全部代碼供參考：

<div class="container"> 
    <!--播放區(qū)域--> 
    <div class="video"> 
        <!--播放區(qū)域--> 
        <div class="video-play" show="{{!isShowController}}"> 
            <stack> 
                <video if="{{resetVideo}}" speed="{{playSpeed}}" @touchmove="videoTouchMoved" direction="horizontal" @error="resetVideo" id="m_video" src="{{playedVideo.src}}" @timeupdate="timeChanged" @prepared="mPrepared" @start="mStart" @pause="mStop" @finish="mStop" direction="horizontal" poster="{{playedVideo.image}}" @touchend="toolsTouched" controls="false"></video> 
                <!--工具欄，當(dāng)觸發(fā)屏幕時(shí)顯示，n秒后自動隱藏--> 
                <div class="vide-tools" show="{{ showToolsTime>0 }}" @touchend="toolsTouched" @touchmove="videoTouchMoved"> 
                    <div class="video-tools_child tools-top" @touchstart="childToolTouched"> 
                        <div class="tools-left"> 
                            <!--標(biāo)題--> 
                            <text class="title">{{playedVideo.name}}</text> 
                        </div> 
                        <div class="tools-top-right"> 
                            <!--流轉(zhuǎn)--> 
                            <image class="control_button" @touchend="remoteIt" src="../../common/images/ic_hop.svg"></image > 
                        </div> 
                    </div> 
 
                    <div class="video-tools_child tools-bottom" @touchstart="childToolTouched"> 
                        <div class="tools-left"> 
                            <!--播放/暫停--> 
                            <button @touchend="playOrPause" class="tools-btn">{{isPlayed?"‖":"▷"}}</button> 
                            <!--當(dāng)前播放時(shí)長--> 
                            <text class="duration-text">{{thisTimeStr}}</text> 
                            <!--滑塊--> 
                            <slider class="v-slider" step="1" max="{{ totalTime }}" value="{{thisTime}}" @change="sliderChanged"></slider> 
                            <!--總播放時(shí)長--> 
                            <text class="duration-text">{{totalTimeStr}}</text> 
                        </div> 
                        <div class="tools-right"> 
                            <!--倍速--> 
                            <button id="speedBtn" @touchend="showSpeedMenu" class="tools-btn btn-speed">{{speedStr}}</button> 
                            <popup id="speedPopup" target="speedBtn" placement="top" > 
                                <div> 
                                    <text class="speed-child" @touchend="{{speedChanged(2.0)}}">2.0X</text> 
                                    <text class="speed-child" @touchend="{{speedChanged(1.5)}}">1.5X</text> 
                                    <text class="speed-child" @touchend="{{speedChanged(1.0)}}">1.0X</text> 
                                    <text class="speed-child" @touchend="{{speedChanged(0.5)}}">0.5X</text> 
                                </div> 
                            </popup> 
                            <!--全屏--> 
                            <button class="tools-btn" @touchend="showAllScreen">{{isAllScreen?"╬":"▞"}}</button> 
                        </div> 
                    </div> 
                </div> 
            </stack> 
        </div> 
    </div> 
    <!--視頻列表--> 
    <div class="video-lists"> 
        <text class="card-title">視頻列表：</text> 
        <list initialindex="{{playIndex}}" selected="{{playIndex}}" scrollbar="on" > 
            <list-item for="{{ videoSource }}" @touchmove="listTouchMoved"  @touchend="{{checkVideo($idx)}}" > 
                <div class="preview-video"> 
                    <image src="{{$item.image}}"></image> 
                    <text>{{$item.name}}</text> 
                </div> 
            </list-item> 
        </list> 
    </div> 
    <!-- 評論區(qū)   --> 
    <div class="comments"> 
        <text class="card-title">評論區(qū)：</text> 
        <!--評論列表--> 
        <list divider="true"> 
            <list-item for="thisComments"> 
                <div class="comment-info"> 
                    <!--用戶信息--> 
                    <div class="comment-user"> 
                        <label>用戶:{{$item.user}}</label> 
                    </div> 
                    <!--內(nèi)容--> 
                    <div class="comment-content"> 
                        <text>{{$item.content}}</text> 
                    </div> 
                </div> 
            </list-item> 
        </list> 
        <div class="comment-put"> 
            <input id="commentMsg" @change="commentChanged" value="{{ commentContent }}" placeholder="請發(fā)表你的想法"></input> 
            <button class="btn" @touchend="sendComment">發(fā) 布</button> 
        </div> 
    </div> 
</div> 

當(dāng)然僅有hml是不夠的，還需要樣式的配合，樣式相關(guān)文件請參考gitee:https://gitee.com/panda-coder/harmonyos-apps/tree/master/Player。

邏輯控制-js

邏輯控制是個復(fù)雜的過程，每個人都有不同的實(shí)現(xiàn)方式，不可能細(xì)講，就挑一部分進(jìn)行講解。

1.實(shí)現(xiàn)控制欄的功能

要想實(shí)現(xiàn)控制欄的播放/暫停、滑動條、全屏等基礎(chǔ)功能需要依賴video控件的方法。只需要執(zhí)行對應(yīng)函數(shù)即可。

this.$element(控件id).方法(參數(shù)) 

2.computed

computed是一個非常好用的屬性方法。computed內(nèi)的函數(shù)能在hml中直接使用，并且只要在computed函數(shù)的data數(shù)據(jù)改變就會觸發(fā)重新計(jì)算。

例如：

computed:{ 
        playedVideo(){//當(dāng)前播放視頻 
            return this.videoSource[this.playIndex] 
        }, 
} 

獲取當(dāng)前播放視頻的數(shù)據(jù)，在上述方法中，this.videoSource或this.playIndex其中任何一個值進(jìn)行修改，都會觸發(fā)playedVideo函數(shù)進(jìn)行重新計(jì)算。

這樣處理一些實(shí)時(shí)變化的數(shù)據(jù)就非常的方便。代碼中的totalTimeStr、thisTimeStr、speedStr這些值就是通過計(jì)算來返回一個格式化的文字內(nèi)容。

3.$watch

在視頻中有個功能，就是點(diǎn)擊屏幕后顯示控制欄，不操作間隔5s后控制欄自動消失，但是點(diǎn)擊非控制欄部分直接消失，點(diǎn)擊控制欄部分刷新時(shí)間間隔為5s。

大家可以先思考一下該怎么去設(shè)計(jì)這部分的邏輯控制，以及需要的函數(shù)邏輯操作等再往下看。

我使用$watch部分對showToolsTime 參數(shù)進(jìn)行監(jiān)聽。

$watch是當(dāng)監(jiān)聽的值改變后執(zhí)行回調(diào)函數(shù)，并回傳監(jiān)聽值變化前幾變化后的值。

在onInit函數(shù)中監(jiān)聽showToolsTime。

onInit() { 
       this.$watch("showToolsTime",'watchShowToolsTimeEvent') 
       this.videoSource=data.videoSource 
       this.commentsSource=data.comments 
       this.playIndex=0; 
       this.showToolsTime=5; 
   },   
/監(jiān)聽控制欄顯示時(shí)間 
   watchShowToolsTimeEvent(newV,oldV){ 
       if(newV>0){ 
           clearTimeout(this.watchTimer) 
           this.watchTimer=setTimeout(()=>{ 
               if(newV>oldV) 
                   this.showToolsTime=newV 
               --this.showToolsTime; 
           },1000) 
       }else{ 
           this.$element("speedPopup").hide() 
       } 
   }, 

在watchShowToolsTimeEvent中有兩個關(guān)鍵點(diǎn)，一個是clearTimeout，另一個是返回值不能與newV相同。

js中的setTimeOut是異步執(zhí)行，不清理掉timer(setTimeOut)在外部賦值后就會導(dǎo)致數(shù)據(jù)異步賦值問題。

返回值與newV一致$watch就失效了(除非外部激發(fā))，所以執(zhí)行了this.showToolsTime=newV后也要執(zhí)行–this.showToolsTime。

這樣不管任何地方修改this.showToolsTime的值之后，都會進(jìn)行每秒減1的運(yùn)算(大于0的情況下)。

4.分布式能力

分布式能力參考官方文檔，無特殊處理。

文檔：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-distributed-migration-0000001050024965

5.左右滑動切換視頻

首先通過touchmove事件先收集手指滑動的坐標(biāo)。

然后在touchend事件中判斷手指滑動方向。

判斷代碼如下：

getTouchMoveOrientation(source,num){ 
        let orientation=[] 
        for(let i=1;i<source.length;i++){ 
            let startX=source[i-1].localX 
            let startY=source[i-1].localY 
            let moveEndX=source[i].localX 
            let moveEndY=source[i].localY 
            let X=moveEndX-startX; 
            let Y=moveEndY-startY; 
            if(Math.abs(X)>Math.abs(Y) && X>0){ 
                orientation.push("left2right") 
            }else if(Math.abs(X)>Math.abs(Y) && X<0){ 
                orientation.push("right2left") 
            }else if(Math.abs(X)<Math.abs(Y) && Y>0){ 
                orientation.push("top2bottom") 
            }else if(Math.abs(X)<Math.abs(Y) && Y<0){ 
                orientation.push("bottom2top") 
            } 
        } 
        let obj={},maxNum=0 
        orientation.forEach((item,index)=>{ 
            if(orientation.indexOf(item)==index){ 
                obj[item]=1 
            }else{ 
                obj[item]+=1 
            } 
        }) 
 
        for(let i in obj){ 
            if(obj[i]>maxNum){ 
                maxNum=obj[i] 
            } 
        } 
        if(maxNum<num) 
           return "none" 
        for(let i in obj){ 
            if(obj[i]==maxNum) 
                return i 
        } 
    }, 

先收集滑動方向，然后再找出滑動方向最多的值，再和**閾值(num)**進(jìn)行比較，超過閾值則返回滑動方向信息，否則返回“none”。

接下來再根據(jù)返回的滑動方向進(jìn)行一系列操作(如：視頻切換則改變this.playedIndexed值)。

接下來談?wù)劜蛔愫透惺埽?/p>

1.list控件在滑動的過程中會觸發(fā)觸摸事件，需要開發(fā)者自行處理，不友好。

2.當(dāng)video全屏?xí)r暫未找到怎么顯示我寫的自定義控件欄。

3.js組件開發(fā)暫無引入三方包功能(僅能引入純js)，Java有對應(yīng)的har，js的三方組件庫還未見引入身影。

4.為什么會提到j(luò)s的三方組件庫尼，就是因?yàn)樵慕M件不夠美觀。想通過引入三方庫來構(gòu)建不同體系的組件(可能只是改改樣式)希望盡快安排相關(guān)文檔。

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com