vime-js / vime

Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
https://vimejs.com
MIT License
2.75k stars 154 forks source link

HTML custom control onclick #365

Closed vogdb closed 1 year ago

vogdb commented 1 year ago

Hi! At the vm-control doc page there is an example of HTML custom control

      <vm-control label="Playback" keys="k" pressed="false">
        <vm-icon name="play"></vm-icon>
        <vm-tooltip>Play (k)</vm-tooltip>
      </vm-control>

It renders fine but the problem is that it does not do anything. I suspect there should be onClick handler as in adjacent Svelte example. Is it possible to use onClick in HTML custom control or should I stick to Svelte or any other framework?

vogdb commented 1 year ago

Aha. Found it. I can get player API by this:

  <script>
    const player = document.querySelector('vm-player');
    console.log(player);

    // Example function to showcase updating property.
    // const seekForward = () => {
    //   player.currentTime += 5;
    // };

    // // Example function to showcase calling player method.
    // const enterFullscreen = () => {
    //   player.enterFullscreen();
    // };
  </script>