Player API Tutorials Switch between different livestreams

This tutorial helps if you want to switch between live-streams or videos. In this example we create a button in the player controls and switch the language.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      body,
      html {
        width: 100%;
        height: 100%;
        background: #efefef;
        margin: 0;
        padding: 0;
      }

      #player-wrapper {
        width: 50%;
        margin: 0 auto;
      }
    </style>
  </head>

  <body>
    <div id="player-wrapper">
      <!-- Player container -->
      <div id="player"></div>
    </div>
    <script
      type="text/javascript"
      src="https://player.3qsdn.com/js3q.latest.js"
    ></script>
    <script>
      // In this case German stream
      let dataid_main = '66e68995-11ca-11e8-9273-002590c750be'

      // In this case Italian stream
      let dataid_second = '1bc8cbdc-73c5-11e8-ae4b-0cc47a188158'

      let js3qVideoPlayer

      let currentDataId = ''

      function addSwitchButton() {
        // Replace the prefix 'player' with your container ID
        let Controls = document.getElementById('player-chrome')

        if (document.getElementById('player-switch-button')) return

        let childElement = Controls.appendChild(
          document.createElement('js3q-button')
        )
        childElement.setAttribute('id', 'player-switch-button')
        childElement.setAttribute('class', 'sdn-button-right sdnicbsun-chat')

        // Tooltip
        childElement.setAttribute('tooltip', 'Switch language')
        childElement.addEventListener('click', function () {
          if (currentDataId === dataid_main) {
            loadPlayer(dataid_second)
          } else {
            loadPlayer(dataid_main)
          }
        })
      }

      function loadPlayer(dataid) {
        currentDataId = dataid

        if (
          js3qVideoPlayer &&
          typeof js3qVideoPlayer.destroy() === 'function'
        ) {
          js3qVideoPlayer.pause()
          js3qVideoPlayer.destroy()
        }

        js3qVideoPlayer = new js3q({
          dataid: dataid,
          container: 'player',
          autoplay: true,
        })

        // Event listener player ready event
        js3qVideoPlayer.on('media.ready', function (data) {
          addSwitchButton()
        })
      }

      // Init main stream;
      loadPlayer(dataid_main)
    </script>
  </body>
</html>

Live Demo

See the Pen Tutorial: Switch between two Live Streams by 3Q GmbH (@3qgmbh) on CodePen.

Previous Next