Update controller.js

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) {