<!-- 自定义进度条 --> <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>