xiaoxue_admin
/
DPlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve

This commit is contained in:
guokeke 2017-08-28 22:32:08 +08:00 committed by DIYgod
parent dabb7fb699
commit f0357f199c
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
2 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/DPlayer.js
View File

@ -1106,14 +1106,17 @@ class DPlayer {
const time = this.video.duration * (tx / pbar.offsetWidth);
timeTips.innerText = utils.secondToTime(time);
timeTips.style.left = `${(tx - 20)}px`;
this.previewWrapper.style.left = `${(tx - 80)}px`;
this.previewWrapper.style.left = `${(tx - this.previewWrapper.offsetWidth / 2)}px`;
switch (e.type) {
case 'mouseenter':
case 'mouseover':
case 'mousemove':
this.isMouseHoverPbar = true;
this.setPreviewSourceAndFrame({ time });
this.setPreviewSourceAndFrame({
url: this.video.current.src,
time
});
this.timeTipsDisplay(true, timeTips);
break;
case 'mouseleave':
@ -1146,11 +1149,18 @@ class DPlayer {
this.previewVideo = document.createElement("video");
this.previewWrapper = this.element.getElementsByClassName('dplayer-bar-preview')[0];
this.previewCanvas = this.element.getElementsByClassName('dplayer-bar-preview-canvas')[0];
this.previewCanvas.width = this.previewWrapper.offsetWidth;
this.previewCanvas.height = this.previewWrapper.offsetHeight;
this.previewVideo.preload = 'auto';
const w = this.element.offsetWidth / 3;
const h = this.element.offsetHeight / 3;
this.previewWrapper.style.width = `${w}px`;
this.previewWrapper.style.height = `${h}px`;
this.previewWrapper.style.top = `${-h}px`;
this.previewCanvas.width = w;
this.previewCanvas.height = h;
this.setPreviewSourceAndFrame({
url: this.video.src, time: 0
url: this.video.current.src, time: 0
});
this.bindPreviewEvent();
}
@ -1165,20 +1175,22 @@ class DPlayer {
}
bindPreviewEvent () {
if (!this.previewVideo) {return;}
this.previewNumber = 0;
this.previewVideo.addEventListener('seeked', () => {
this.generPreviewImage(this.video.currentTime);
this.previewNumber += 1;
this.generPreviewImage(this.previewNumber);
});
}
generPreviewImage (time) {
if (time !== this.video.currentTime) {return;}
generPreviewImage (number) {
if (number !== this.previewNumber) {return;}
if (!this.isMouseHoverPbar) {return;}
this.previewDispaly(true);
if (!this.isPreViewShow) {return;}
const ctx = this.previewCanvas.getContext('2d');
ctx.drawImage(this.previewVideo, 0, 0,
this.previewWrapper.offsetWidth,
this.previewWrapper.offsetHeight);
this.previewDispaly(true);
}

6
src/DPlayer.scss
View File

@ -376,9 +376,9 @@
.dplayer-bar-preview {
position: absolute;
width: 160px;
height: 80px;
top: -80px;
// width: 160px;
// height: 80px;
// top: -80px;
background: #fff;
&.hidden {