如何用JS开发自定义播放栏的视频播放器

想了解更多内容，请访问：

我们提供的服务有：成都做网站、网站设计、微信公众号开发、网站优化、网站认证、自流井ssl等。为数千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的自流井网站制作公司

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.

效果图

原始控件效果图：

修改后的效果图：

看过了演示效果，接下来讲解如何开发。

开发部分

在开发之前，我们要先翻阅文档，了解系统提供的能力。

我们从属性、事件、方法中可以得出，以现在提供的能力，完全可以重写视频的控制栏。

接下来就是界面的构思和布局：

界面布局

1. 整体布局

整体界面分为：视频播放、视频列表、评论区三大部分。

所以我们代码上先构建三个div。

2.video区域布局

想要把控制栏覆盖到video上面我们就需要借助stack组件，如下图：

视频控制栏我们分为上下两个部分，所以需要构建两个div来包裹里面控件，如下图：

再往下就是控制栏上细节上的控件了，包括文字、按钮、滑动条等，在此就不进行赘述了。

3.视频列表区域及评论区域

视频列表区域和评论区域排版相对比较简单，一个标题栏将显示区域进行分割，再一个list列表显示内容。

评论区域则多一栏评论功能，其结构排版如图：

整个排版结构大致介绍完毕，以下为hml页面的全部代码供参考：

 
 
 
 
      
  
  
  
  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}} 
  •                  
  •              
  •          
  •      
  •      
  •      
  •         评论区： 
  •          
  •          
  •              
  •                  
  •                      
  •                      
  •                          
  •                      
  •                      
  •                      
  •                         {{$item.content}} 
  •                      
  •                  
  •              
  •          
  •          
  •              
  •             发 布 
  •          
  •      
  •  

    • 当然仅有hml是不够的，还需要样式的配合，样式相关文件请参考gitee:https://gitee.com/panda-coder/harmonyos-apps/tree/master/Player。

    逻辑控制-js

    逻辑控制是个复杂的过程，每个人都有不同的实现方式，不可能细讲，就挑一部分进行讲解。

    1.实现控制栏的功能

    要想实现控制栏的播放/暂停、滑动条、全屏等基础功能需要依赖video控件的方法。只需要执行对应函数即可。

     
 
 
 
        
  
  
  
    1. this.$element(控件id).方法(参数) 
      2.

    2.computed

    computed是一个非常好用的属性方法。computed内的函数能在hml中直接使用，并且只要在computed函数的data数据改变就会触发重新计算。

    例如：

     
 
 
 
        
  
  
  
    1. computed:{ 
      2.   
  
  
  
    2.         playedVideo(){//当前播放视频 
      3.   
  
  
  
    3.             return this.videoSource[this.playIndex] 
      4.   
  
  
  
    4.         }, 
      5.   
  
  
  
    5. } 
      6.

    获取当前播放视频的数据，在上述方法中，this.videoSource或this.playIndex其中任何一个值进行修改，都会触发playedVideo函数进行重新计算。

    这样处理一些实时变化的数据就非常的方便。代码中的totalTimeStr、thisTimeStr、speedStr这些值就是通过计算来返回一个格式化的文字内容。

    3.$watch

    在视频中有个功能，就是点击屏幕后显示控制栏，不操作间隔5s后控制栏自动消失，但是点击非控制栏部分直接消失，点击控制栏部分刷新时间间隔为5s。

    大家可以先思考一下该怎么去设计这部分的逻辑控制，以及需要的函数逻辑操作等再往下看。

    我使用$watch部分对showToolsTime 参数进行监听。

    $watch是当监听的值改变后执行回调函数，并回传监听值变化前几变化后的值。

    在onInit函数中监听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. /监听控制栏显示时间 
      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中有两个关键点，一个是clearTimeout，另一个是返回值不能与newV相同。

    js中的setTimeOut是异步执行，不清理掉timer(setTimeOut)在外部赋值后就会导致数据异步赋值问题。

    返回值与newV一致$watch就失效了(除非外部激发)，所以执行了this.showToolsTime=newV后也要执行–this.showToolsTime。

    这样不管任何地方修改this.showToolsTime的值之后，都会进行每秒减1的运算(大于0的情况下)。

    4.分布式能力

    分布式能力参考官方文档，无特殊处理。

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

    5.左右滑动切换视频

    首先通过touchmove事件先收集手指滑动的坐标。

    然后在touchend事件中判断手指滑动方向。

    判断代码如下：

     
 
 
 
        
  
  
  
    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.

    先收集滑动方向，然后再找出滑动方向最多的值，再和**阈值(num)**进行比较，超过阈值则返回滑动方向信息，否则返回“none”。

    接下来再根据返回的滑动方向进行一系列操作(如：视频切换则改变this.playedIndexed值)。

    接下来谈谈不足和感受：

    1.list控件在滑动的过程中会触发触摸事件，需要开发者自行处理，不友好。

    2.当video全屏时暂未找到怎么显示我写的自定义控件栏。

    3.js组件开发暂无引入三方包功能(仅能引入纯js)，Java有对应的har，js的三方组件库还未见引入身影。

    4.为什么会提到js的三方组件库尼，就是因为原生的组件不够美观。想通过引入三方库来构建不同体系的组件(可能只是改改样式)希望尽快安排相关文档。

    想了解更多内容，请访问：

    和华为官方合作共建的鸿蒙技术社区

    https://harmonyos.

    文章标题：如何用JS开发自定义播放栏的视频播放器
    URL网址：http://www.csdahua.cn/qtweb/news3/157253.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    外贸建站知识

    分类信息网站

    服务器托管　　 　网站空间　　 　成都微信小程序开发　　 　重庆电信五里店机房　　 　tpbzx.cn　　 　成都西信服务器托管　　 　成都广告制作　　 　成都网站优化　　 　成都定制网站建设　　 　成都网站建设公司　　 　网络口碑营销　　 　IDC机房托管　　 　兴久牧业　　 　网站优化排名　　 　西云服务器托管　　 　成都定制网页设计　　 　成都网站制作　　 　成都电信服务器托管　　 　软文发布平台　　 　定制网站建设