Browse Source

feat: add preventClickToggle option, close #1221

DIYgod 2 years ago
parent
commit
b429b9a5b7
4 changed files with 11 additions and 6 deletions
  1. 1 0
      docs/guide.md
  2. 1 0
      docs/zh/guide.md
  3. 8 6
      src/js/controller.js
  4. 1 0
      src/js/options.js

+ 1 - 0
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                                                                                                    |
 | 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                                                                           |
 | 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)                                                                                                |
 | 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                | -                                  | video info                                                                                                                                                 |
 | video.quality        | -                                  | see [#Quality switching](#quality-switching)                                                                                                               |
 | video.quality        | -                                  | see [#Quality switching](#quality-switching)                                                                                                               |
 | video.defaultQuality | -                                  | see [#Quality switching](#quality-switching)                                                                                                               |
 | video.defaultQuality | -                                  | see [#Quality switching](#quality-switching)                                                                                                               |

+ 1 - 0
docs/zh/guide.md

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

+ 8 - 6
src/js/controller.js

@@ -45,12 +45,14 @@ class Controller {
         });
         });
 
 
         if (!utils.isMobile) {
         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 {
         } else {
             this.player.template.videoWrap.addEventListener('click', () => {
             this.player.template.videoWrap.addEventListener('click', () => {
                 this.toggle();
                 this.toggle();

+ 1 - 0
src/js/options.js

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