Search code examples
javascriptdomvideo.jsselectors-api

videoJS: mouseTimeDisplay $(selector, contextopt) method example

Looking at the documentation for videoJS for the mouseTimedDisplay and trying to understand it better.

How to I use the $ selector?

(Thinking I then can avoid using document.querySelector to get elements/components.)

Solution

  • It's a wrapper around querySelector that will search the component's element by default, unless a different starting element is given as a starting element.

    Given the standard controls, player.controlBar.progressControl.seekBar.mouseTimeDisplay.$('div') would return the inner div (with the vjs-time-tooltip class) of the MouseTimeDisplay component.

    <div class="vjs-mouse-display">
  <div class="vjs-time-tooltip" aria-hidden="true"></div>
</div>

    If you wanted the component's element (with vjs-mouse-display), you just use el().

    You'd mostly use it when creating/extending custom player components.