代码未整理,不适合直接用,仅供参考部分,后续整理完整补发
<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;
}