Brightcove Video interactions not working

[L3vi]

I don't know if this happens with other video players or if this is an existing bug, but I've found that certain features of this particular video player do not function within a flickity slider. Specifically play/pause functions correctly but if you try to scrub through the video or adjust the volume or anything like that, it's being prevented due to the preventDefault logic that allows the click/drag motion to occur.

I found the issue of the problem is that the code checks if the clicked element is in the list of focusNodes which are specifically INPUT, TEXTAREA, or SELECT. But this doesn't account for unique cases like this where it's simply a DIV that is used for other purposes. https://codepen.io/L3vi-the-selector/pen/dyaJYEv

[L3vi]

By the way this is my temporary band-aid fix I figured out:

var focusNodes = {
    INPUT: true,
    TEXTAREA: true,
    SELECT: true
  };

  proto.pointerDownFocus = function (event) {
    var isFocusNode =
      focusNodes[event.target.nodeName] ||
      event.target.closest("[role='slider']"); // This is what was added
    if (!isFocusNode) {
      this.focus();
    }
  };

  proto._pointerDownPreventDefault = function (event) {
    var isTouchStart = event.type == "touchstart";
    var isTouchPointer = event.pointerType == "touch";
    var isFocusNode =
      focusNodes[event.target.nodeName] ||
      event.target.closest("[role='slider']"); // This is what was added
    if (!isTouchStart && !isTouchPointer && !isFocusNode) {
      event.preventDefault();
    }
  };

Don't know if there is a way to make the code more dynamic or maybe providing the users with an option to pass in some sort of query that can avoid the click prevention and the code could check if it's a focusNode OR if it's one of the user's queries? I dunno, just a thought, in the mean time I will use my band-aid fix above.