打造自己的h5播放器

版权声明： https://blog.csdn.net/LPLIFE/article/details/82017959

代码未整理，不适合直接用，仅供参考部分，后续整理完整补发

   <div class="video-menu">
            <div class="video-inner" id="{{vm.progressWrapId}}">
                <div class="progress" id="{{vm.progressVideoId}}">
                </div>
            </div>
        </div>
        <div class="sub">
            <span class="m-r-xs m-l-xs">
                 <i class="icon-fast-backward text-title-black" ng-click="vm.h5Video().reducePlaySpeed()"></i>
            </span>
            <span class="m-r-xs">
                 <i ng-if="!playState" class="icon-play text-title-black" ng-click="vm.h5Video().onPlay()"></i>
                 <i ng-if="playState" class="icon-pause text-title-black" ng-click="vm.h5Video().onStop()"></i>
            </span>
            <span>
                 <i class="icon-fast-forward text-title-black" ng-click="vm.h5Video().addPlaySpeed()"></i>
            </span>
        </div>
        <div class="extra">
            <select ng-model="speed" name="speed" ng-change="vm.h5Video().Playspeed(speed)" style="width: 40px; height: 18px;">
                    <option  value="1" selected="selected">x1</option>
                    <option  value="1.5">x1.5</option>
                    <option  value="2">x2</option>
                    <option  value="4">x4</option>
            </select>
            <span class="m-l-xs">
                <i class="icon-maximize text-title-black" ng-click="vm.h5Video().expand()"></i>
            </span>
        </div>

    h5Video() {
        return {
            expand: () => {
                this.activexVideo.webkitRequestFullScreen();
            },
            // 停止播放
            onStop: () => {
                if (this.$scope.playState) {
                    this.activexVideo.pause();
                    this.$scope.playState = false;
                    // clearInterval(this.progressFlag);
                    this.$interval.cancel(this.progressFlag);
                } else {
                    this.activexVideo.play();
                }
            },
            onPlay: () => {
                this.$scope.playState = true;
                this.activexVideo.play();
                let percent = this.activexVideo.currentTime / this.activexVideo.duration;
                this.progressFlag = this.$interval(this.h5Video().Playtime, 60);
            },
            // 倍速播放
            Playspeed: (speed) => {
                console.log(speed);
                if (speed != null) {
                    this.activexVideo.playbackRate = this.activexVideo.defaultPlaybackRate * speed;
                }
                console.log(this.activexVideo.playbackRate);
            },
            // 播放进度条
            Playtime: () => {
                let percent = this.activexVideo.currentTime / this.activexVideo.duration;
                console.log(this.progressWrap.offsetWidth);
                this.progress.style.width = percent * (this.progressWrap.offsetWidth) - 2 + "px";
                // showProgress.innerHTML = (percent * 100).toFixed(1) + "%";
            },
            // 快进
            addPlaySpeed: () => {
                console.log(this.activexVideo.defaultPlaybackRate);
                this.activexVideo.currentTime += 2;
            },
            // 后退
            reducePlaySpeed: () => {
                this.activexVideo.currentTime -= 1;
            }
        }
    }

* {
    margin: 0;
    padding: 0;
}

.sub,
.video-menu,
.extra {
    float: left;
    min-height: 20px;
}

.sub {
    margin-left: -100%;
    width: 65px;
    position: relative;
}

.extra {
    margin-left: -68px;
    width: 66px;
    position: relative;
}

.video-menu {
    width: 100%;
}

.video-inner {
    margin-left: 72px;
    margin-right: 76px;
    min-height: 5px;
    word-break: break-all;
    position: relative;
    background-color: #2F3941 ;
    height:6px;
    margin-top: 6px;
    border-radius: 3px;
}

.progress,
 {
    height: 5px;
    width:4px;
    background-color: #c1c1c1;
   
}