feat: add preventClickToggle option, close #1221

DIYgod · Aug 15, 2022 · b429b9a · b429b9a
1 parent 52e9627
commit b429b9a
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/docs/guide.md b/docs/guide.md
@@ -99,6 +99,7 @@ You can custom your player instance by those options
 | playbackSpeed        | [0.5, 0.75, 1, 1.25, 1.5, 2]       | optional playback speed, or or you can set a custom one                                                                                                    |
 | logo                 | -                                  | showing logo in the top left corner, you can adjust its size and position by CSS                                                                           |
 | apiBackend           | -                                  | getting and sending danmaku in your way, see [#live](#live)                                                                                                |
+| preventClickToggle   | false                              | prevent toggle video play/pause status when click player                                                                                                   |
 | video                | -                                  | video info                                                                                                                                                 |
 | video.quality        | -                                  | see [#Quality switching](#quality-switching)                                                                                                               |
 | video.defaultQuality | -                                  | see [#Quality switching](#quality-switching)                                                                                                               |

diff --git a/docs/zh/guide.md b/docs/zh/guide.md
@@ -89,6 +89,7 @@ DPlayer 有丰富的参数可以自定义你的播放器实例
 | playbackSpeed        | [0.5, 0.75, 1, 1.25, 1.5, 2]       | 可选的播放速率，可以设置成自定义的数组                                                                  |
 | logo                 | -                                  | 在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置                                                |
 | apiBackend           | -                                  | 自定义获取和发送弹幕行为，见[#直播](#直播)                                                              |
+| preventClickToggle   | false                              | 阻止点击播放器时候自动切换播放/暂停                                                                     |
 | video                | -                                  | 视频信息                                                                                                |
 | video.quality        | -                                  | 见[#清晰度切换](#清晰度切换)                                                                            |
 | video.defaultQuality | -                                  | 见[#清晰度切换](#清晰度切换)                                                                            |

diff --git a/src/js/controller.js b/src/js/controller.js
@@ -45,12 +45,14 @@ class Controller {
         });
 
         if (!utils.isMobile) {
-            this.player.template.videoWrap.addEventListener('click', () => {
-                this.player.toggle();
-            });
-            this.player.template.controllerMask.addEventListener('click', () => {
-                this.player.toggle();
-            });
+            if (!this.player.options.preventClickToggle) {
+                this.player.template.videoWrap.addEventListener('click', () => {
+                    this.player.toggle();
+                });
+                this.player.template.controllerMask.addEventListener('click', () => {
+                    this.player.toggle();
+                });
+            }
         } else {
             this.player.template.videoWrap.addEventListener('click', () => {
                 this.toggle();

diff --git a/src/js/options.js b/src/js/options.js
@@ -22,6 +22,7 @@ export default (options) => {
         contextmenu: [],
         mutex: true,
         pluginOptions: { hls: {}, flv: {}, dash: {}, webtorrent: {} },
+        preventClickToggle: false,
     };
     for (const defaultKey in defaultOption) {
         if (defaultOption.hasOwnProperty(defaultKey) && !options.hasOwnProperty(defaultKey)) {