From 70118ab62ae9ecd96cb60dc44e808d6a32b05670 Mon Sep 17 00:00:00 2001 From: "Robert J. Berger" Date: Wed, 10 Nov 2021 11:06:25 -0800 Subject: [PATCH] feat: Add userAction.click to prevent pause/play when player is clicked (#7495) Pass `false` as `userAction.click` to disable the default click-to-play behavior. Alternatively, pass in a function, to enable custom behavior. Fixes #7123. --- docs/guides/options.md | 35 +++++++++++++++++++ sandbox/userAction-click.html.example | 48 +++++++++++++++++++++++++++ src/js/player.js | 24 +++++++++++--- 3 files changed, 103 insertions(+), 4 deletions(-) create mode 100644 sandbox/userAction-click.html.example diff --git a/docs/guides/options.md b/docs/guides/options.md index bfcd5fced5..aa04643abb 100644 --- a/docs/guides/options.md +++ b/docs/guides/options.md @@ -45,6 +45,7 @@ * [techCanOverridePoster](#techcanoverrideposter) * [techOrder](#techorder) * [userActions](#useractions) + * [userActions.click](#useractionsclick) * [userActions.doubleClick](#useractionsdoubleclick) * [userActions.hotkeys](#useractionshotkeys) * [userActions.hotkeys.fullscreenKey](#useractionshotkeysfullscreenkey) @@ -443,6 +444,40 @@ Defines the order in which Video.js techs are preferred. By default, this means > Type: `Object` +### `userActions.click` + +> Type: `boolean|function` + +Controls how clicking on the player/tech operates. If set to `false`, clicking is disabled and will no longer cause the player to toggle between paused and playing. + +```js +videojs('my-player', { + userActions: { + click: false + } +}); +``` + +If undefined or set to `true`, clicking is enabled and toggles the player between paused and play. To override the default click handling, set `userActions.click` to a function which accepts a `click` event (in this example it will request Full Screen, the same as a `userAction.doubleClick`): + +```js +function myClickHandler(event) = { + // `this` is the player in this context + + if (this.isFullscreen()) { + this.exitFullscreen(); + } else { + this.requestFullscreen(); + } +}; + +videojs('my-player', { + userActions: { + click: myClickHandler + } +}); +``` + ### `userActions.doubleClick` > Type: `boolean|function` diff --git a/sandbox/userAction-click.html.example b/sandbox/userAction-click.html.example new file mode 100644 index 0000000000..dcb16cd03e --- /dev/null +++ b/sandbox/userAction-click.html.example @@ -0,0 +1,48 @@ + + + + + Video.js Sandbox + + + + +
+

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html

+ 
npm start
+ 
open http://localhost:9999/sandbox/index.html
+
+ + + + + + +

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

+ + + + + + diff --git a/src/js/player.js b/src/js/player.js index f33ecf4474..726fd3d799 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -1936,10 +1936,26 @@ class Player extends Component { return; } - if (this.paused()) { - silencePromise(this.play()); - } else { - this.pause(); + if ( + this.options_ === undefined || + this.options_.userActions === undefined || + this.options_.userActions.click === undefined || + this.options_.userActions.click !== false + ) { + + if ( + this.options_ !== undefined && + this.options_.userActions !== undefined && + typeof this.options_.userActions.click === 'function' + ) { + + this.options_.userActions.click.call(this, event); + + } else if (this.paused()) { + silencePromise(this.play()); + } else { + this.pause(); + } } }