thumbnails image

README.md

@@ -33,6 +33,7 @@ DPlayer is a lovely HTML5 danmaku video player to help people build video and da
 	- Screenshot
 	- Hotkeys
 	- Quality switching
+    - Thumbnails
 
 Using DPlayer on your project? [Let me know!](https://github.com/DIYgod/DPlayer/issues/31)
 
@@ -124,10 +125,9 @@ var dp = new DPlayer({
 - [Donate via Alipay](https://ws4.sinaimg.cn/large/006tKfTcgy1fhu1vf4ih7j307s07sdfm.jpg)
 - Donate via Bitcoin: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1
 
-
 ## Author
 
 **DPlayer** © [DIYgod](https://github.com/DIYgod), Released under the [MIT](./LICENSE) License.<br>
 Authored and maintained by DIYgod with help from contributors ([list](https://github.com/DIYgod/DPlayer/contributors)).
 
-> Blog [@Anotherhome](https://www.anotherhome.net) · GitHub [@DIYgod](https://github.com/DIYgod) · Twitter [@DIYgod](https://twitter.com/DIYgod) · Weibo [@DIYgod酱](http://weibo.com/anotherhome) · Telegram Channel [@awesomeDIYgod](https://t.me/awesomeDIYgod)
+> Blog [@Anotherhome](https://www.anotherhome.net) · GitHub [@DIYgod](https://github.com/DIYgod) · Twitter [@DIYgod](https://twitter.com/DIYgod) · Telegram Channel [@awesomeDIYgod](https://t.me/awesomeDIYgod)

demo/index.html

@@ -20,6 +20,7 @@
                 video: {
                     url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
                     pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
+                    thumbnails: 'http://devtest.qiniudn.com/thumbnails.jpg'
                 },
                 danmaku: {
                     id: '9E2E3368B56CDBB4',

src/DPlayer.js

@@ -6,6 +6,7 @@ import handleOption from './option';
 import i18n from './i18n';
 import html from './html';
 import Danmaku from './danmaku';
+import Thumbnails from './thumbnails';
 
 let index = 0;
 
@@ -244,12 +245,11 @@ class DPlayer {
             this.seek(parseFloat(bar.playedBar.style.width) / 100 * this.video.duration);
         });
 
-        this.initVideoPreview();
-        this.isPreViewShow = false;
+        if (this.option.video.thumbnails) {
+            this.initThumbnails();
+        }
         this.isTimeTipsShow = true;
-        this.isMouseHoverPbar = false;
-        this.mouseHandler = this.mouseHandler(
-            pbar, pbarTimeTips).bind(this);
+        this.mouseHandler = this.mouseHandler(pbar, pbarTimeTips).bind(this);
         pbar.addEventListener('mousemove', this.mouseHandler);
         pbar.addEventListener('mouseover', this.mouseHandler);
         pbar.addEventListener('mouseenter', this.mouseHandler);
@@ -1096,31 +1096,23 @@ class DPlayer {
             const { clientX } = e;
             const px = cumulativeOffset(pbar).left;
             const tx = clientX - px;
+            if (tx < 0 || tx > pbar.offsetWidth) {
+                return;
+            }
             const time = this.video.duration * (tx / pbar.offsetWidth);
             timeTips.style.left = `${(tx - 20)}px`;
-            this.previewWrapper.style.left = `${(tx - this.previewWrapper.offsetWidth / 2)}px`;
 
             switch (e.type) {
             case 'mouseenter':
             case 'mouseover':
             case 'mousemove':
-                this.isMouseHoverPbar = true;
-                if (this.previewTime !== parseInt(time)) {
-                    timeTips.innerText = utils.secondToTime(time);
-                    this.previewTime = parseInt(time);
-                    this.setPreview && clearTimeout(this.setPreview);
-                    this.setPreview = setTimeout(() => {
-                        this.setPreviewSourceAndFrame({
-                            time: parseInt(time)
-                        });
-                    }, 500);
-                }
+                this.thumbnails && this.thumbnails.show(tx);
+                timeTips.innerText = utils.secondToTime(time);
                 this.timeTipsDisplay(true, timeTips);
                 break;
             case 'mouseleave':
             case 'mouseout':
-                this.isMouseHoverPbar = false;
-                this.previewDispaly(false);
+                this.thumbnails && this.thumbnails.hide();
                 this.timeTipsDisplay(false, timeTips);
                 break;
             }
@@ -1143,74 +1135,15 @@ class DPlayer {
         }
     }
 
-    initVideoPreview () {
-        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.previewVideo.preload = 'metadata';
-        const resize = () => {
-            const w = this.element.offsetWidth / 4;
-            const h = this.element.offsetHeight / 4;
-            this.previewWrapper.style.width = `${w}px`;
-            this.previewWrapper.style.height = `${h}px`;
-            this.previewWrapper.style.top = `${-h + 2}px`;
-            this.previewCanvas.width = w;
-            this.previewCanvas.height = h;
-        };
-        resize();
-        this.video.addEventListener('loadedmetadata', () => {
-            resize();
-        });
-
-        this.setPreviewSourceAndFrame({
-            url: this.video.src, time: 0
-        });
-        this.bindPreviewEvent();
-    }
+    initThumbnails () {
+        this.thumbnails = new Thumbnails(this.element.getElementsByClassName('dplayer-bar-preview')[0], this.element.getElementsByClassName('dplayer-bar-wrap')[0].offsetWidth, this.option.video.thumbnails);
 
-    setPreviewSourceAndFrame ({ url, time }) {
-        if (url) {
-            this.previewVideo.src = url;
-        }
-        if (time) {
-            this.previewVideo.currentTime = time;
-        }
-    }
-
-    bindPreviewEvent () {
-        this.previewNumber = 0;
-        this.previewVideo.addEventListener('seeked', () => {
-            this.previewNumber += 1;
-            this.generPreviewImage(this.previewNumber);
+        this.video.addEventListener('loadedmetadata', () => {
+            this.thumbnails.resize(160, 90);
+            // this.thumbnails.resize(this.element.offsetWidth / 4, this.element.offsetHeight / 4);
         });
     }
 
-    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);
-    }
-
-
-    previewDispaly (show) {
-        if (show) {
-            if (this.isPreViewShow) {return;}
-            if (!this.isMouseHoverPbar) {return;}
-            this.previewWrapper.classList.remove('hidden');
-            this.isPreViewShow = true;
-        } else {
-            if (!this.isPreViewShow) {return;}
-            this.previewWrapper.classList.add('hidden');
-            this.isPreViewShow = false;
-        }
-    }
-
     notice (text, time = 2000, opacity = 0.8) {
         const noticeEle = this.element.getElementsByClassName('dplayer-notice')[0];
         noticeEle.innerHTML = text;

src/DPlayer.scss

@@ -378,10 +378,8 @@
                 position: absolute;
                 background: #fff;
                 pointer-events: none;
-
-                &.hidden {
-                    visibility: hidden;
-                }
+                display: none;
+                background-size: auto 100%;
             }
 
             .dplayer-bar-preview-canvas {

src/html.js

@@ -156,10 +156,7 @@ const html = {
             </div>
             <div class="dplayer-bar-wrap">
                 <div class="dplayer-bar-time hidden">00:00</div>
-                <div class="dplayer-bar-preview hidden">
-                    <canvas class="dplayer-bar-preview-canvas">
-                    </canvas>
-                </div>
+                <div class="dplayer-bar-preview"></div>
                 <div class="dplayer-bar">
                     <div class="dplayer-loaded" style="width: 0;"></div>
                     <div class="dplayer-played" style="width: 0; background: ${option.theme}">

src/i18n.js

@@ -10,7 +10,7 @@ Use this as shown below..... */
 module.exports = function (lang) {
     this.lang = lang;
     this.tran = (text) => {
-        if (tranTxt[this.lang]) {
+        if (tranTxt[this.lang] && tranTxt[this.lang][text]) {
             return tranTxt[this.lang][text];
         }
         else {
@@ -42,6 +42,8 @@ const tranTxt = {
         'Switching to': '正在切换至',
         'Switched to': '已经切换至',
         'quality': '画质',
+        'FF to': '快进至',
+        'REW to': '快退至'
     },
     "zh-tw" : {
         'Danmaku is loading': '彈幕加載中',
@@ -64,5 +66,7 @@ const tranTxt = {
         'Switching to': '正在切換至',
         'Switched to': '已經切換至',
         'quality': '畫質',
+        'FF to': '快進至',
+        'REW to': '快退至'
     }
 };

src/thumbnails.js

@@ -0,0 +1,25 @@
+class Thumbnails {
+    constructor (container, width, url) {
+        this.container = container;
+        this.width = width;
+        this.container.style.backgroundImage = `url('${url}')`;
+    }
+
+    resize (width, height) {
+        this.container.style.width = `${width}px`;
+        this.container.style.height = `${height}px`;
+        this.container.style.top = `${-height + 2}px`;
+    }
+
+    show (position) {
+        this.container.style.display = 'block';
+        this.container.style.backgroundPosition = `-${(Math.ceil(position / this.width * 100) - 1) * 160}px 0`;
+        this.container.style.left = `${(position - this.container.offsetWidth / 2)}px`;
+    }
+
+    hide () {
+        this.container.style.display = 'none';
+    }
+}
+
+module.exports = Thumbnails;