日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
如何用JS開(kāi)發(fā)自定義播放欄的視頻播放器

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

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、自流井ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的自流井網(wǎng)站制作公司

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

https://harmonyos.

效果圖

原始控件效果圖：

修改后的效果圖：

看過(guò)了演示效果，接下來(lái)講解如何開(kāi)發(fā)。

開(kāi)發(fā)部分

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

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

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

界面布局

1. 整體布局

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

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

2.video區(qū)域布局

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

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

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

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

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

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

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

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.      
    4.   
  
  
  
  4.          
    5.   
  
  
  
  5.          
    6.   
  
  
  
  6.              
    7.   
  
  
  
  7.                  
    8.   
  
  
  
  8.                  
    9.   
  
  
  
  9.                 0 }}" @touchend="toolsTouched" @touchmove="videoTouchMoved"> 
    10.   
  
  
  
  10.                      
    11.   
  
  
  
  11.                          
    12.   
  
  
  
  12.                              
    13.   
  
  
  
  13.                             {{playedVideo.name}} 
    14.   
  
  
  
  14.                         
 
  •                          
  •                              
  •                              
  •                         
    •  
  •                     
    •  
  •  
  •                      
  •                          
  •                              
  •                             {{isPlayed?"‖":"?"}} 
  •                              
  •                             {{thisTimeStr}} 
  •                              
  •                              
  •                              
  •                             {{totalTimeStr}} 
  •                         
    •  
  •                          
  •                              
  •                             {{speedStr}} 
  •                              
  •                                 
     
  •                                     2.0X 
  •                                     1.5X 
  •                                     1.0X 
  •                                     0.5X 
  •                                 
    •  
  •                              
  •                              
  •                             {{isAllScreen?"╬":"?"}} 
  •                         
    •  
  •                     
    •  
  •                 
    •  
  •              
  •         
    •  
  •     
    •  
  •      
  •      
  •         視頻列表： 
  •          
  •              
  •                  
  •                      
  •                     {{$item.name}} 
  •                 
    •  
  •              
  •          
  •     
    •  
  •      
  •      
  •         評(píng)論區(qū)： 
  •          
  •          
  •              
  •                  
  •                      
  •                      
  •                          
  •                      
  •                      
  •                      
  •                         {{$item.content}} 
  •                      
  •                  
  •              
  •          
  •          
  •              
  •             發(fā) 布 
  •          
  •      
  •  

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

    邏輯控制-js

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

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

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

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

    2.computed

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

    例如：

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

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

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

    3.$watch

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

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

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

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

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

     
 
 
 
        
  
  
  
    1. onInit() { 
      2.   
  
  
  
    2.        this.$watch("showToolsTime",'watchShowToolsTimeEvent') 
      3.   
  
  
  
    3.        this.videoSource=data.videoSource 
      4.   
  
  
  
    4.        this.commentsSource=data.comments 
      5.   
  
  
  
    5.        this.playIndex=0; 
      6.   
  
  
  
    6.        this.showToolsTime=5; 
      7.   
  
  
  
    7.    },   
      8.   
  
  
  
    8. /監(jiān)聽(tīng)控制欄顯示時(shí)間 
      9.   
  
  
  
    9.    watchShowToolsTimeEvent(newV,oldV){ 
      10.   
  
  
  
    10.        if(newV>0){ 
      11.   
  
  
  
    11.            clearTimeout(this.watchTimer) 
      12.   
  
  
  
    12.            this.watchTimer=setTimeout(()=>{ 
      13.   
  
  
  
    13.                if(newV>oldV) 
      14.   
  
  
  
    14.                    this.showToolsTime=newV 
      15.   
  
  
  
    15.                --this.showToolsTime; 
      16.   
  
  
  
    16.            },1000) 
      17.   
  
  
  
    17.        }else{ 
      18.   
  
  
  
    18.            this.$element("speedPopup").hide() 
      19.   
  
  
  
    19.        } 
      20.   
  
  
  
    20.    }, 
      21.

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

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

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

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

    4.分布式能力

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

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

    5.左右滑動(dòng)切換視頻

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

    然后在touchend事件中判斷手指滑動(dòng)方向。

    判斷代碼如下：

     
 
 
 
        
  
  
  
    1. getTouchMoveOrientation(source,num){ 
      2.   
  
  
  
    2.         let orientation=[] 
      3.   
  
  
  
    3.         for(let i=1;i  
  
  
  
    4.             let startX=source[i-1].localX 
      5.   
  
  
  
    5.             let startY=source[i-1].localY 
      6.   
  
  
  
    6.             let moveEndX=source[i].localX 
      7.   
  
  
  
    7.             let moveEndY=source[i].localY 
      8.   
  
  
  
    8.             let X=moveEndX-startX; 
      9.   
  
  
  
    9.             let Y=moveEndY-startY; 
      10.   
  
  
  
    10.             if(Math.abs(X)>Math.abs(Y) && X>0){ 
      11.   
  
  
  
    11.                 orientation.push("left2right") 
      12.   
  
  
  
    12.             }else if(Math.abs(X)>Math.abs(Y) && X<0){ 
      13.   
  
  
  
    13.                 orientation.push("right2left") 
      14.   
  
  
  
    14.             }else if(Math.abs(X)0){ 
      15.   
  
  
  
    15.                 orientation.push("top2bottom") 
      16.   
  
  
  
    16.             }else if(Math.abs(X)  
  
  
  
    17.                 orientation.push("bottom2top") 
      18.   
  
  
  
    18.             } 
      19.   
  
  
  
    19.         } 
      20.   
  
  
  
    20.         let obj={},maxNum=0 
      21.   
  
  
  
    21.         orientation.forEach((item,index)=>{ 
      22.   
  
  
  
    22.             if(orientation.indexOf(item)==index){ 
      23.   
  
  
  
    23.                 obj[item]=1 
      24.   
  
  
  
    24.             }else{ 
      25.   
  
  
  
    25.                 obj[item]+=1 
      26.   
  
  
  
    26.             } 
      27.   
  
  
  
    27.         }) 
      28.   
  
  
  
    28.  
      29.   
  
  
  
    29.         for(let i in obj){ 
      30.   
  
  
  
    30.             if(obj[i]>maxNum){ 
      31.   
  
  
  
    31.                 maxNum=obj[i] 
      32.   
  
  
  
    32.             } 
      33.   
  
  
  
    33.         } 
      34.   
  
  
  
    34.         if(maxNum  
  
  
  
    35.            return "none" 
      36.   
  
  
  
    36.         for(let i in obj){ 
      37.   
  
  
  
    37.             if(obj[i]==maxNum) 
      38.   
  
  
  
    38.                 return i 
      39.   
  
  
  
    39.         } 
      40.   
  
  
  
    40.     }, 
      41.

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

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

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

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

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

    3.js組件開(kāi)發(fā)暫無(wú)引入三方包功能(僅能引入純js)，Java有對(duì)應(yīng)的har，js的三方組件庫(kù)還未見(jiàn)引入身影。

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

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

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

    https://harmonyos.


    分享文章：如何用JS開(kāi)發(fā)自定義播放欄的視頻播放器
    本文鏈接：http://www.dlmjj.cn/article/djgohos.html

    其他資訊