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

<div class="container">
    <!--播放区域-->
    <div class="video">
        <!--播放区域-->
        <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>
                <!--工具栏，当触发屏幕时显示，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">
                            <!--标题-->
                            <text class="title">{{playedVideo.name}}</text>
                        </div>
                        <div class="tools-top-right">
                            <!--流转-->
                            <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>
                            <!--当前播放时长-->
                            <text class="duration-text">{{thisTimeStr}}</text>
                            <!--滑块-->
                            <slider class="v-slider" step="1" max="{{ totalTime }}" value="{{thisTime}}" @change="sliderChanged"></slider>
                            <!--总播放时长-->
                            <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>
    <!-- 评论区   -->
    <div class="comments">
        <text class="card-title">评论区：</text>
        <!--评论列表-->
        <list divider="true">
            <list-item for="thisComments">
                <div class="comment-info">
                    <!--用户信息-->
                    <div class="comment-user">
                        <label>用户:{{$item.user}}</label>
                    </div>
                    <!--内容-->
                    <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="请发表你的想法"></input>
            <button class="btn" @touchend="sendComment">发 布</button>
        </div>
    </div>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.

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

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

 onInit() {
        this.$watch("showToolsTime",'watchShowToolsTimeEvent')
        this.videoSource=data.videoSource
        this.commentsSource=data.comments
        this.playIndex=0;
        this.showToolsTime=5;
    },  
//监听控制栏显示时间
    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()
        }
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

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
        }
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.