From c5026f071fd196445795eb4ef46d140bc6c6c6e8 Mon Sep 17 00:00:00 2001 From: A-Circle Zhang Date: Sun, 19 Aug 2018 18:28:49 +0800 Subject: [PATCH 1/7] Update controller.scss --- src/css/controller.scss | 46 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/src/css/controller.scss b/src/css/controller.scss index 1d4a86e..e1c9035 100644 --- a/src/css/controller.scss +++ b/src/css/controller.scss @@ -35,6 +35,50 @@ .dplayer-bar .dplayer-played .dplayer-thumb { transform: scale(1); } + .dplayer-highlight { + display: block; + width: 8px; + transform: translateX(-4px); + top: 30%; + height: 40%; + } + } + .dplayer-highlight { + width: 9px; + z-index: 12; + position: absolute; + top: 40%; + 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 +653,4 @@ } } } -} \ No newline at end of file +} From 1df45adcada6a847ab880a432fa6340db79f7bd0 Mon Sep 17 00:00:00 2001 From: A-Circle Zhang Date: Sun, 19 Aug 2018 18:30:09 +0800 Subject: [PATCH 2/7] Update controller.js --- src/js/controller.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/js/controller.js b/src/js/controller.js index 602eb57..ac94a3d 100644 --- a/src/js/controller.js +++ b/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 = '' + this.player.options.highlight[i].text + ''; + this.player.template.playedBarWrap.insertBefore(p, this.player.template.playedBarTime); + } + } + } + }); + } initThumbnails () { if (this.player.options.video.thumbnails) { From 520e92b1f7857d4ae7171ee9e75ef539757994ae Mon Sep 17 00:00:00 2001 From: A-Circle Zhang Date: Sun, 19 Aug 2018 18:33:05 +0800 Subject: [PATCH 3/7] Update player.js --- src/js/player.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/player.js b/src/js/player.js index f0073ef..ac4b0e8 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -447,7 +447,7 @@ class DPlayer { } else { this.seek(0); - video.play(); + this.play(); } if (this.danmaku) { this.danmaku.danIndex = 0; From 28566ca298421d55b0ca5a19dc960963fc63403c Mon Sep 17 00:00:00 2001 From: A-Circle Zhang Date: Sun, 19 Aug 2018 18:35:59 +0800 Subject: [PATCH 4/7] Update controller.scss From 7077da7f0d293df3679f889a8da42721d41c2b0e Mon Sep 17 00:00:00 2001 From: A-Circle Zhang Date: Sun, 19 Aug 2018 19:09:23 +0800 Subject: [PATCH 5/7] Update controller.scss --- src/css/controller.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/css/controller.scss b/src/css/controller.scss index e1c9035..c294d05 100644 --- a/src/css/controller.scss +++ b/src/css/controller.scss @@ -39,15 +39,14 @@ display: block; width: 8px; transform: translateX(-4px); - top: 30%; + top: 4px; height: 40%; } } .dplayer-highlight { - width: 9px; z-index: 12; position: absolute; - top: 40%; + top: 5px; width: 6px; height: 20%; border-radius: 6px; From d2ae6bf4a42a260bdc6b6a197bda4f92c544578e Mon Sep 17 00:00:00 2001 From: A-Circle Zhang Date: Mon, 20 Aug 2018 11:56:20 +0800 Subject: [PATCH 6/7] Update README.md --- docs/README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index c9d62c9..f4f2e30 100644 --- a/docs/README.md +++ b/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. \ No newline at end of file +Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks. From 5f7ee642ce33612b670ce0237cf986195d1a3982 Mon Sep 17 00:00:00 2001 From: A-Circle Zhang Date: Mon, 20 Aug 2018 11:59:08 +0800 Subject: [PATCH 7/7] Update README.md --- docs/zh-Hans/README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/zh-Hans/README.md b/docs/zh-Hans/README.md index c9bf3de..5d7548a 100644 --- a/docs/zh-Hans/README.md +++ b/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); ### 为什么播放器不能在手机上自动播放？ -大多数移动端浏览器禁止了视频自动播放。 \ No newline at end of file +大多数移动端浏览器禁止了视频自动播放。