Merge pull request #354 from A-Circle-Zhang/master

add Highlight (key point markers in progress bar)

docs/README.md

@@ -109,6 +109,7 @@ danmaku.user | 'DIYgod' | danmaku user name
 danmaku.bottom | - | values like: '10px' '10%', the distance between the danmaku bottom and player bottom, in order to prevent warding off subtitle
 danmaku.unlimited | false | display all danmaku even though danmaku overlap, notice that player will remember user setting, default setting will not work after user set it themselves
 contextmenu | [] | custom contextmenu
+highlight | [] | custom time markers upon progress bar
 mutex | true | prevent to play multiple player at the same time, pause other players when this player start play
 
 For example:
@@ -164,6 +165,16 @@ const dp = new DPlayer({
                 console.log(player);
             }
         }
+    ],
+    highlight: [
+        {
+            text: 'marker for 20s',
+            time: 20
+        },
+        {
+            text: 'marker for 2mins',
+            time: 120
+        }
     ]
 });
 ```
@@ -681,4 +692,4 @@ For full browser support it should look like this:
 
 ### Why can't player autoplay in some mobile browsers?
 
-Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks.
+Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks.

docs/zh-Hans/README.md

@@ -110,6 +110,7 @@ danmaku.user | 'DIYgod' | 弹幕用户名
 danmaku.bottom | - | 弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: '10px' '10%'
 danmaku.unlimited | false | 海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
 contextmenu | [] | 自定义右键菜单
+highlight | [] | 自定义进度条提示点
 mutex | true | 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
 
 例如:
@@ -165,6 +166,16 @@ const dp = new DPlayer({
                 console.log(player);
             }
         }
+    ],
+    highlight: [
+        {
+            time: 20,
+            text: '这是第 20 秒'
+        },
+        {
+            time: 120,
+            text: '这是 2 分钟'
+        }
     ]
 });
 ```
@@ -678,4 +689,4 @@ dp.danmaku.draw(danmaku);
 
 ### 为什么播放器不能在手机上自动播放？
 
-大多数移动端浏览器禁止了视频自动播放。
+大多数移动端浏览器禁止了视频自动播放。

src/css/controller.scss

@@ -35,6 +35,49 @@
             .dplayer-bar .dplayer-played .dplayer-thumb {
                 transform: scale(1);
             }
+            .dplayer-highlight {
+                display: block;
+                width: 8px;
+                transform: translateX(-4px);
+                top: 4px;
+                height: 40%;
+            }
+        }
+        .dplayer-highlight {
+            z-index: 12;
+            position: absolute;
+            top: 5px;
+            width: 6px;
+            height: 20%;
+            border-radius: 6px;
+            background-color: #fff;
+            text-align: center;
+            transform: translateX(-3px);
+            transition: all .2s ease-in-out;
+            &:hover {
+                .dplayer-highlight-text {
+                    display: block;
+                }
+                &~.dplayer-bar-preview {
+                    opacity: 0;
+                },
+                &~.dplayer-bar-time {
+                    opacity: 0;
+                }
+            }
+            .dplayer-highlight-text {
+                display: none;
+                position: absolute;
+                left: 50%;
+                top: -24px;
+                padding: 5px 8px;
+                background-color: rgba(0, 0, 0, .62);
+                color: #fff;
+                border-radius: 4px;
+                font-size: 12px;
+                white-space: nowrap;
+                transform: translateX(-50%);
+            }
         }
         .dplayer-bar-preview {
             position: absolute;
@@ -609,4 +652,4 @@
             }
         }
     }
-}
+}

src/js/controller.js

@@ -29,6 +29,7 @@ class Controller {
         this.initQualityButton();
         this.initScreenshotButton();
         this.initSubtitleButton();
+        this.initHighlights();
         if (!utils.isMobile) {
             this.initVolumeButton();
         }
@@ -56,6 +57,29 @@ class Controller {
             });
         }
     }
+    
+    initHighlights () {
+        this.player.on('durationchange', () => {
+            if (this.player.video.duration !== 1 && this.player.video.duration !== Infinity) {
+                if (this.player.options.highlight) {
+                    const highlights = document.querySelectorAll('.dplayer-highlight');
+                    [].slice.call(highlights, 0).map((item) => {
+                        this.player.template.playedBarWrap.removeChild(item);
+                    });
+                    for (let i = 0; i < this.player.options.highlight.length; i++) {
+                        if (!this.player.options.highlight[i].text || !this.player.options.highlight[i].time) {
+                            continue;
+                        }
+                        const p = document.createElement('div');
+                        p.classList.add('dplayer-highlight');
+                        p.style.left = ( (this.player.options.highlight[i].time / this.player.video.duration) * 100) + '%';
+                        p.innerHTML = '<span class="dplayer-highlight-text">' + this.player.options.highlight[i].text + '</span>';
+                        this.player.template.playedBarWrap.insertBefore(p, this.player.template.playedBarTime);
+                    }
+                }
+            }
+        });
+    }
 
     initThumbnails () {
         if (this.player.options.video.thumbnails) {