Control Video Player using Code

Gumlet player works well with the Player.js library to get control over the video player and take custom actions as and when needed.

What you can do:

Loop video
Change Volume
Change Duration
Pause/Play video
Get Video Progress
Mute/Unmute video
Change Video Quality
Get video finished status
Change Playback Speed
Add or Remove Event Listeners

Installation:

Use NPM package
```
npm install @gumlet/player.js
```

Use CDN-hosted version

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@gumlet/player.js@2.0/dist/player.min.js"></script>

Use GitHub repository

Github Repository: https://github.com/gumlet/player.js

Note: You should always wait until the ready events fire before interacting with the player object.

Sample code snippet:

const player = new window.playerjs.Player('iframe');

player.on('ready', () => {
  player.on('play', () => {
    console.log('play');
  });

  player.getDuration(duration => console.log(duration));

  if (player.supports('method', 'mute')) {
    player.mute();
  }

  player.play();
});

On document ready, sample implemetation:

<div style="position:relative;aspect-ratio:16/9;">
      <iframe 
            loading="lazy" title="Gumlet video player"
            src="https://play.gumlet.io/embed/679b047a1103c2cb78e78a98"
            style="border:none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
          allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;">
          </iframe>
    </div>

<script>
  $(document).on('ready', () => {
    $('iframes').each(() => {
      const player = new window.playerjs.Player(this);
      player.on('ready', () => player.play());
    });
  });
</script>

If you are using React or gumlet-react-player, you should check this out - React Player