Video.js: button was triggered 'handleClick' function twice when I clicked in customer control-bar

[lengmeiyanok]

Description

I use customer control bar in project.I touched the play button in control bar.but the video was not playing.The video was playing when touched a longer time.I debug the videojs code.I found the handleClick function occurred twice.

  handleClick() {
    if (this.player_.paused()) {
      this.player_.play();
    } else {
      this.player_.pause();
    }
  }

test case url: https://ncfb-stg3.pingan.com.cn:56803/wap3.0/?#/video/detail.html?articleId=1623421
open test case url in the chrome by mobile mode or in the mobile
version:5.12.6

[lengmeiyanok]

I found the reason,ClickableComponent function has two bindEvent--tap click event,so I clicked the play button in customer control bar in the mobile,the handleClick function was occurred twice.I removed the click event,the problem was solved.

function ClickableComponent(player, options) {
    _classCallCheck(this, ClickableComponent);

    var _this = _possibleConstructorReturn(this, _Component.call(this, player, options));

    _this.emitTapEvents();

    _this.on('tap', _this.handleClick);
   // _this.on('click', _this.handleClick);
    _this.on('focus', _this.handleFocus);
    _this.on('blur', _this.handleBlur);
    return _this;
  }

[gkatsev]

Hm... I'm unable to reproduce this either on a device or in chrome emulating a device. On all my devices the button only runs the handleClick method once. what versions of chrome did you test against? Also, can you re-upload the test case url? Seems to be down.

[askinadze]

I have the same problem. Clicking "Play" triggers "Play" and "Pause" so that the video can not be started. I could only solve this by removing the "click" event, as Lengmeiyanok did.
I've found that this problem only occurs when uikit.js is included on the site.

[askinadze]

maybe better to use: this.on(['mousedown', 'touchstart'], this.handleClick); ?

[KalobTaulien]

I was also getting this problem when loading UIkit.

As @lengmeiyanok mentioned, you can edit the videojs file itself. I was using http://vjs.zencdn.net/6.6.3/video.js, copied to to local, and used (slight adjustment for v6.6.3):

function ClickableComponent(player, options) {
  classCallCheck(this, ClickableComponent);

  var _this = possibleConstructorReturn(this, _Component.call(this, player, options));

  _this.emitTapEvents();

  _this.on('tap', _this.handleClick);
  // _this.on('click', _this.handleClick);
  _this.on('focus', _this.handleFocus);
  _this.on('blur', _this.handleBlur);
  return _this;
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.