<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Panda player - Example</title>
   <!--
    Mandatory parameter:

    * v: (video ID)

    Optional parameters:

    * l: (library id)
    * color: #4874F1
    * controlsColor: #FFF
    * controls: play-large,play,progress,current-time,volume,captions,settings,pip,fullscreen
    * autoplay: false
    * muted: false
-->
  <iframe id="panda-XXXX" src="https://player-vz-ded14ebd-85a.tv.pandavideo.com.br/embed/?v=3b101f05-84aa-4de0-9b64-71f1855388af"
    style="border:0;width:720px;height:480px"></iframe>
  
  <div id="example">
    <h1>Panda Player Example</h1>
    <p id="current-time">Current time: 0</p>
    <p id="status">Status: paused</p>
    <div style="display: flex">
      <button id="play">Play</button>
      <button id="pause">Pause</button>
      <button id="forward">Avançar 5s</button>
    </div>
  </div>
  <script async src="https://player.pandavideo.com.br/api.v2.js"></script>
  <script>
    window.pandascripttag = window.pandascripttag || [];
    window.pandascripttag.push(function (){
        const player = new PandaPlayer('panda-XXXX', {
	        onReady: () => {
              console.log('Player is ready',player.getCurrentTime());
              document.getElementById('play').onclick = function () {
                player.play()
              }
              document.getElementById('pause').onclick = function () {
                player.pause()
              }
              setInterval(() => {
                document.getElementById('current-time').innerHTML = 'Current time: ' + player.getCurrentTime().toFixed(2) + ' seconds'
              }, 1000)
              player.onEvent(function ({ message }) {
                if (message === 'panda_pause') {
                  document.getElementById('status').innerHTML = "Status: paused";
                } else if (message === 'panda_play') {
                  document.getElementById('status').innerHTML = "Status: playing";
                }
              })
          },
          onError: (event) => {
            	console.log('Player onError', event)
          }
      })
    })

  </script>
  </body>
</html>

Fetching information dynamically

To configure the player dynamically based on the video information, you can follow the steps below:

Use the PandaVideo API (List Videos) to fetch the video ID you want to embed.
Store the video ID in a variable and use it and use it in your developing application.
The optional parameters can be obtained here..