# 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 <a href="#page_html" id="page_html"></a>

```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 src="https://player.3qsdn.com/js3q.latest.js"></script>
    <script>
      // In this case German stream
      const dataid_main = '66e68995-11ca-11e8-9273-002590c750be'

      // In this case Italian stream
      const 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 <a href="#page_live_demo" id="page_live_demo"></a>

{% embed url="<https://codepen.io/3qgmbh/pen/oNopeKE>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://player.docs.3q.video/tutorials/switch-between-different-livestreams.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
