vue 自定义video 的进度条，可快进，可拖动
<template>
<div class="trailer_video_box">
<!-- 宣传片区域 -->
<video ref="trailer" class="trailer_box" preload :src="videoUrl"></video>
<!-- end -->
<!-- 自定义进度条 -->
<div class="trailer_progress_bar">
<div class="proress_title">
<img src="@/assets/images/live/xsjlogo.png" />
<p>正在播放宣传片，播放完后，可继续录制，请耐心等待…</p>
</div>
<div class="proress_content_box">
<p class="pro_pone">{{ this.currentTime }}</p>
<div
ref="progress"
class="progress_bar_box"
@mousedown="getNowWh($event)"
@mouseup="mouseup($event)"
>
<div
ref="onProgress"
:class="[
radiusLeft
? 'on_progress_bar_child border_Radius'
: 'on_progress_bar_child',
]"
>
<span
v-show="!radiusLeft"
ref="mouseDom"
class="mouse_down"
@mousedown.stop="mousedown($event)"
@mouseup.stop="mouseup($event)"
></span>
</div>
</div>
<p class="pro_pone">{{ this.duration }}</p>
</div>
</div>
<!-- end -->
</div>
</template>
<script>
import Watcher from "../../../webSocket/watcher";
export default {
name: "trailerModal",
props: {
videoUrl: {
type: String,
default: "",
},
},
data() {
return {
currentTime: "00:00", //当前时间
duration: "00:00", //总时长
pvideo: null, //视频容器
timer: null, //定时器
radiusLeft: false,
// https://www.w3school.com.cn/i/movie.ogg
// videoUrl:'https://vdse.bdstatic.com//b143aff3dacc8c3baca30fd0f9882eba.mp4'
};
},
mounted() {
console.log("aa==" + this.videoUrl);
this.init();
},
methods: {
//初始化事件
init() {
this.pvideo = this.$refs.trailer;
this.isPlay();
},
//播放宣传片
isPlay() {
if (this.pvideo.paused || this.pvideo.ended) {
this.pvideo.play();
this.timer = setInterval(this.setProgress, 60);
} else {
this.pvideo.pause();
clearInterval(this.timer);
this.timer = null;
}
},
//设置进度条
setProgress() {
let progress = this.$refs.progress; //获取进度条父元素
let onProgress = this.$refs.onProgress; //获取变化进度条的元素
let mouseDom = this.$refs.mouseDom;
this.currentTime = this.timeFomat(this.pvideo.currentTime); //当前播放的时间,格式化时间格式后展示
this.duration = this.timeFomat(this.pvideo.duration); //总时长，格式化时间格式后展示
//换算,视频没有结束或者被暂停
if (!this.pvideo.ended) {
this.radiusLeft = false;
let percent = this.pvideo.currentTime / this.pvideo.duration; //得出比例
mouseDom &&
(mouseDom.style.left = percent * progress.offsetWidth + "px");
onProgress &&
(onProgress.style.width = percent * progress.offsetWidth + "px");
} else {
//视频已结束
onProgress && (onProgress.style.width = "100%");
this.radiusLeft = true;
clearInterval(this.timer);
this.timer = null;
// this.$store.commit('setPlayVideo',false);
// let flag = this.$store.state.live.isVideo;
// !flag&&Watcher.$emit('ffMpeg',flag);
// window.$myToast({
// text:'宣传片已播放完，请继续录制',
// duration: 1500,
// icon: "warning",
// style: "right:50%;bottom:10%;transform: translate(50%,50%);"
// });
setTimeout(() => {
//通知父组件关闭
this.$emit("closeModal");
}, 1500);
}
},
//点击当前位置，设置进度条
getNowWh(event) {
let ev = event || window.event;
this.videoSeek(ev.offsetX);
},
//传入当前点击的偏移量，换算当前视频时间，并播放
videoSeek(startx) {
if (this.pvideo.paused || this.pvideo.ended) {
this.pvideo.play();
this.enhanceVideoSeek(startx);
} else {
this.enhanceVideoSeek(startx);
}
},
//根据鼠标拖动的距离，换算进度条
enhanceVideoSeek(moveWidth) {
clearInterval(this.timer);
let progress = this.$refs.progress; //获取进度条父元素
let onProgress = this.$refs.onProgress; //获取变化进度条的元素
let percent = moveWidth / progress.offsetWidth;
onProgress &&
(onProgress.style.width = percent * progress.offsetWidth + "px");
this.pvideo.currentTime = percent * this.pvideo.duration;
this.timer = setInterval(this.setProgress, 60);
},
//鼠标按下
mousedown(event) {
let that = this;
let ev = event || window.event;
let _target = ev.target;
let startx = ev.clientX;
let sb_bkx = startx - ev.target.offsetLeft;
let allwh = this.$refs.progress.clientWidth;
let ww = document.documentElement.clientWidth;
let wh = window.innerHeight;
//阻止事件冒泡
if (ev.preventDefault) {
ev.preventDefault();
} else {
ev.returnValue = false;
}
//移动
document.onmousemove = function (ev) {
let evt = ev || window.event;
let scrolltop =
document.documentElement.scrollTop || document.body.scrollTop;
if (
evt.clientY < 0 ||
evt.clientX < 0 ||
evt.clientY > wh ||
evt.clientX > ww
) {
return false;
}
let endx = evt.clientX - sb_bkx;
//设置拖动有效区域
if (endx > -1 && endx < allwh) {
_target.style.left = endx + "px";
that.enhanceVideoSeek(endx);
} else {
//超出区域，置空拖动事件
document.onmousemove = null;
}
};
},
//鼠标放开
mouseup(e) {
document.onmousemove = null;
},
//订阅暂停事件
stopPlay() {
Watcher.$on("stop", (data) => {
this.isPlay();
});
},
/* 时间格式化 */
timeFomat(time) {
let h = Math.floor(time / 3600);
let m = Math.floor((time % 3600) / 60);
let s = Math.floor(time % 60);
m = m >= 10 ? m : "0" + m;
s = s >= 10 ? s : "0" + s;
if (h === 0) {
return m + ":" + s;
}
return h + ":" + m + ":" + s;
},
},
};
</script>
<style lang='less' scoped>
.trailer_video_box {
width: 100%;
height: calc(100% - 100px);
position: absolute;
top: 8px;
left: 0;
z-index: 1000;
background: #292c32;
border-radius: 12px;
.trailer_box {
width: 100%;
height: calc(100% - 143px);
padding: 0;
object-fit: initial;
border-radius: 12px 12px 0 0;
}
.trailer_progress_bar {
width: 100%;
overflow: hidden;
position: relative;
.proress_title {
width: 100%;
height: 100px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
img {
width: 32px;
height: 32px;
margin-right: 8px;
}
p {
color: #fff;
font-size: 12px;
font-weight: 600;
}
}
.proress_content_box {
width: 100%;
overflow: hidden;
display: flex;
padding: 0 24px;
justify-content: center;
p {
color: #fff;
font-weight: 400;
font-size: 12px;
}
.pro_pone {
}
.progress_bar_box {
flex: 1;
margin: 6px 16px 0 16px;
height: 8px;
background: rgba(205, 206, 209, 0.2);
border-radius: 5px;
box-sizing: border-box;
position: relative;
.on_progress_bar_child {
width: 0;
height: 100%;
background: #cdced1;
border-radius: 4px 0px 0px 4px;
// overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 1001;
.mouse_down {
position: absolute;
width: 5px;
height: 16px;
top: 50%;
margin-top: -8px;
left: 100%;
background: #ff5001;
border-radius: 3px;
z-index: 1002;
cursor: pointer;
}
}
.on_progress_bar_child.border_Radius {
border-radius: 4px;
}
}
}
}
}
</style>
