HTML 重新编写video控制条

针对vue编写视频组件记录

• 隐藏控制条
• 重新编写控制条样式
• 给控制条添加视频操作事件

隐藏控制条

首先需要将原有控制条隐藏掉，在mounted中，隐藏video的原生控制条。
mounted(){
this.$refs.video.controls=false;
}

重新编写控制条样式

在这里设置控制条的position:absolute，然后在其中添加播放按钮，进度条，播放时间，音量控制，全屏等组件，并为组件添加操作事件。

控制条组件代码：

<div class="video-control">
            <a name="pause" @click="play">
                <img v-if="playState === 'play'" src="./img/play.png"/>
                <img v-else-if="playState === 'pause'" src="./img/pause.png"/>
                <img v-else-if="playState === 'replay'" src="./img/replay.png"/>
            </a>
            <span class="progress" name="progress">
                <Slider v-model="percentage"  @on-change="progressChange"></Slider>
                <label class="play-time">{{currentPos}}</label>
                <label class="video-time">{{maxduration}}</label>
            </span>
            <a class="fullscreen" @click="fullScreen">
                <img v-if="screenState === 'nofull'" src="./img/fullscreen.png"/>
                <img v-else  src="./img/nofullscreen.png"/>
            </a>
        </div>

样式

 .volume-control{
        position: absolute;
        bottom: 15px;
        right: 50px;
        z-index: 4;
        height: 150px;
        width: 20px;
        .volume-slider{
            width: 20px;
            height: 130px;
            position: absolute;
            .vue-slider-component{
                padding: 4px 0 !important; 
                .vue-slider{
                    border-radius: 0 !important; 
                    background-color: #979797 !important;
                    margin-left: 8px;
                    .vue-slider-dot{
                        border-radius: 0 !important; 
                        width: 9px !important;
                        height: 3px !important;
                        left: -3px !important;
                        bottom: 7px !important;
                        .vue-slider-tooltip{
                            font-size: 12px !important;
                            padding: 0 !important;
                            min-width: 20px !important;
                            border: 1px solid #d0a807 !important;
                            background-color: #fece09 !important;
                        }
                    }
                    .vue-slider-process{
                        background-color: #fece09  !important;
                    }
                }
            }
        }
        .volume{
            width: 100%;
            height: 20px;
            cursor: pointer;
            position: absolute;
            bottom: 0;
            right: 0;
            img{
                width: 20px;
            }
        }
    }
    .video-control{
        width:100%;
        position:absolute;
        top: 289px;
        z-index: 3;
        background-color:rgba(0, 0, 0, 0.6);
        height: 50px;
        line-height: 50px;
        a:nth-child(1){
            position: relative;
            float: left;
            img{
                width: 27px;
                margin-left: 14px;
            }
        }
        .progress{
            display: block;
            height: 20px;
            position: absolute;
            left: 57px;
            right: 93px;
            top: 20px;
            .ivu-slider{
                position: absolute !important;
                width: 100%;
                .ivu-slider-wrap{
                    margin: 0 !important;
                    background-color: #979797 !important;
                    border-radius: 0 !important;
                    .ivu-slider-bar{
                        border-radius: 0  !important;
                        background-color: #fece09  !important;
                    } 
                    .ivu-slider-button-wrap{
                        display: none;
                    }
                }
            }
            .play-time{
                position: absolute;
                left: 0;
                width: 0;
                color: #fff;
                margin-top: -10px;
            }
            .video-time{
                height: 0;
                width: 0px;
                position: absolute;
                right: 0;
                margin-right: 33px;
                color: #fff;
                margin-top: -10px;
            }
        }
        .fullscreen{
            float: right;
            width: 17px;
            height: 17px;
            margin-right: 17px;
            margin-top: 17px;
            img{
                display: block;
                width: 17px;
            }
        }
    }
    .trump-control-bottom,.trump-control-bottom-flow{display:none;}
    .vertical-center-modal{
        .ivu-modal{
            width: 600px !important;
            height: 339px;
            top:30% !important;
            .ivu-modal-content{
                background-color: rgba(255, 255, 255, 0) !important;
                .ivu-modal-body{
                    width: 600px !important;
                    height: 339px !important;
                    position: relative !important;
                    background-color: rgba(255, 255, 255, 0) !important;
                    padding:  0 !important;
                    .video-player{
                        width: 600px;
                        height: 339px;
                        position: absolute;
                        z-index: 2;
                    }
                    .close-player{
                        width: 32px;
                        position: absolute;
                        top: 0;
                        right: 0;
                        margin-right: -40px;
                        margin-top: -35px;
                        cursor: pointer;
                    }
                }
                .ivu-modal-footer{
                    display: none;
                }
            }
        }

为控制条添加事件

• 控制视频播放

play(){
if(this.playState === 'play' || this.playState === 'replay'){
           this.$refs.video.play();
           this.startTimeBar();
         }else{
           this.$refs.video.pause();
           this.stopTimeBar();
         }
}

• 控制音量

setVolume(){
  if(this.volumeState === 'volume'){
      this.volumeState='muted';  
      this.$refs.video.muted=true;   //静音         
  }else{ 
      this.volumeState = 'volume'; 
      this.$refs.video.muted=false; //打开声音
  }
}

• 全屏显示

fullScreen(){                               this.$refs.video.webkitRequestFullScreen();
}

• 根据视频状态，修改对应等状态参数

 <video 
   v-show="!haserror"
   class="video-player" 
   autoplay="autoplay" 
   :src="videoURL" 
   controls="controls" 
   ref="video"
   :poster="vodeoImg"
   @timeupdate="onPlayerTimeupdate($event)"
   @play="onPlayerPlay($event)"
   @pause="onPlayerPause($event)"
   @ended="onPlayerEnded($event)"
   @statechanged="playerStateChanged($event)"
   @canplay="onPlayerCanplay($event)"
   @error="onError($event)"      
/>

• 修改状态值

onError(e){
                this.haserror=false;
                if(this.videoURL != ''){
                    this.playState='replay';
                    this.haserror=true;
                }
            },
            onPlayerEnded(event){
                this.stopTimeBar();
                this.percentage=100;
                this.playState='replay';
            },
            onPlayerPlay(event){
                this.haserror=false;
                this.videoEvent=event;
                this.playState = 'pause';
                this.videoEvent.srcElement.volume=0.36;
            },
            onPlayerPause(event){
                this.playState='play';
            },
            onPlayerCanplay(event){
                this.haserror=false;
            },
            onPlayerTimeupdate(event){
                this.maxduration=this.secondToDate(event.srcElement.duration);
                this.currentPos=this.secondToDate(event.srcElement.currentTime);
            }

完成上述操作，视频组件基本就写好了，就可以在其他地方调用使用了。