Métodos e Eventos

A API do Player Samba permite a você incorporar o player em sua aplicação e controlá-lo utilizando JavaScript.

Vídeo

Incorporando o player Samba via Player API

A API do Player Samba permite a você incorporar o player em sua aplicação e controlá-lo utilizando JavaScript. Usando as funções de JavaScript da API, você pode criar playlist de videos para reprodução; reproduzir, pausar ou parar esses vídeos; ‘pular’ para um determinando ponto do video; ou recuperar informações sobre o vídeo que está sendo tocado, tais como: volume, tempo de bufferStart, tempo atual (em segundos), tempo de bufferEnd, se está mudo, e os possíveis estados do player: carregado, tocando, pausado, resumido ou finalizado. Você também pode adicionar event listeners que serão disparados em resposta a determinados eventos do player, como por exemplo, uma mudança de estado do player.

Dica: O usuário final deve estar usando um browser que suporte o recurso HTML5 postMessage. A maioria dos navegadores modernos suportam postMessage. Browsers suportados: Internet Explorer 8+, Firefox 3+, Safari 4+, Chrome, e Opera 9+.

Observação: Devido à limitação de tráfego em dispositivos mobile da Apple o método Play quando o vídeo ainda não foi iniciado não é suportado pelos browsers Safari IOS e Chrome IOS

Atenção: Devido ao User Activation V2 e as políticas de engajamento terem se tornado mais rígidas, para o correto funcionamento da API recomendamos inicializar o vídeo com o volume 0 (mais informações sobre este parâmetro na aba Parâmetros VOD ), para atender as conformidades destas políticas e garantir uma melhor experiência ao usuário.

Inicialização:

Para incorporar o player Samba pela API JavaScript é necessário chamar em seu código a API:
<script samba-player-api="player" type="text/javascript" src="https://player.sambatech.com.br/stable/js/samba.player.api.js"></script>

No Javascript coloque o seguinte código para Mídias VOD:

var player = new SambaPlayer("player", { //player é o ID do elemento html que ele vai inserir o iframe

        height: 360,

        width: 640,

        ph: "f8a0041cfa9b4783095c333892184a65",//Player Hash do projeto

        m: "a635b94483d1d527d36545fd31437299",//MidiaID

        playerParams: { //Veja a lista de Parâmetros suportados

                enableShare: true

        },

        events: { //Funcoes que escutam os eventos do player

                "onLoad": "eventListener", //Sendo que eventListener deve ser uma função já presente na página

                    "onStart": "eventListener",

                    "onFinish": "eventListener"

            }

  });

No Javascript coloque o seguinte código para Mídias LIVE:

var player = new SambaPlayer("player", { //player é o ID do elemento html que ele vai inserir o iframe

        height: 360,

        width: 640,

        ph: "f8a0041cfa9b4783095c333892184a65",//Player Hash do projeto

        live: "1a4a3ab41d47b4019e6fa12f085b5804",//LiveChannelID

        playerParams: { //Veja a lista de Parâmetros suportados

                enableShare: true

        },

        events: { //Funcoes que escutam os eventos do player

                "onLoad": "eventListener", //Sendo que eventListener deve ser uma função já presente na página

                    "onStart": "eventListener",

                    "onFinish": "eventListener"

            }

  });

Abaixo veja uma demonstração mais completa de nossos eventos e métodos:

Função chamada:

Eventos

Nome	Valor

Status

Descrição dos estados do player

1: player tocado uma vez e terminado
2: player "buffering"
3: player tocando o vídeo
4: player pausado

Eventos do player ( descubra mais com nossos plugins no SambaLabs!! )

onLoad: Iframe carregado e player disponível para interação
onStart: Evento de play disparado pela primeira vez
onPause: Usuário saiu do estado de "play" para o estado de "pause"
onResume: Player saiu do estado de "pause"
onSeek: Usuário usando a barra de progresso para navegar na mídia
onCuepoint: Player passou por um dos cuepoints cadastrados ( default: 0%, 25%, 50%, 75%, 100%)
onMediaView: Player passou por um dos mediaViews: 0%, 25%, 50%, 75%, 100%
onProgress: Disparado enquanto o player está tocando atualizando o tempo atual do vídeo
onFinish: Mídia chegou ao fim
onError: Houve algum erro na mídia que impediu sua execução ( detalhe: considerados apenas erros pós carregamento bem sucedido do player )

Código

<div class="col-md-12">
  <h3>Incorporando o player Samba via Player API</h3>
  <p>A API do Player Samba permite a você incorporar o player em sua aplicação e controlá-lo utilizando JavaScript.

  Usando as funções de JavaScript da API, você pode criar playlist de videos para reprodução; reproduzir, pausar ou parar esses vídeos; ‘pular’ para um determinando ponto do video; ou recuperar informações sobre o vídeo que está sendo tocado, tais como: volume, tempo de bufferStart, tempo atual (em segundos), tempo de bufferEnd, se está mudo, e os possíveis estados do player: carregado, tocando, pausado, resumido ou finalizado. Você também pode adicionar event listeners que serão disparados em resposta a determinados eventos do player, como por exemplo, uma mudança de estado do player.</p>
  <p><strong>Dica</strong>: O usuário final deve estar usando um browser que suporte o recurso HTML5 postMessage. A maioria dos navegadores modernos suportam postMessage. Browsers suportados: Internet Explorer 8+, Firefox 3+, Safari 4+, Chrome, e Opera 9+.</p>
  <p><strong>Observação</strong>: Devido à limitação de tráfego em dispositivos mobile da Apple o método Play quando o vídeo ainda não foi iniciado não é suportado pelos browsers Safari IOS e Chrome IOS</p>
  <h3>Inicialização:</h3>
  <p>Para incorporar o player Samba pela API JavaScript é necessário chamar em seu código a API:<br>
    <code><script samba-player-api="player" type="text/javascript" src="https://player.sambatech.com.br/v3/samba.player.api.js"></script></code>
  </p>
  </br>
  <h4>No Javascript coloque o seguinte código para Mídias VOD:</h4>
  <code>var player = new SambaPlayer("player", { //player é o ID do elemento html que ele vai inserir o iframe<br>
        height: 360,<br>
        width: 640,<br>
        ph: "f8a0041cfa9b4783095c333892184a65",//Player Hash do projeto<br>
        m: "a635b94483d1d527d36545fd31437299",//MidiaID<br>
        playerParams: { //Veja a lista de Parâmetros suportados<br>
                enableShare: true<br>
        },<br>
        events: { //Funcoes que escutam os eventos do player<br>
                "onLoad": "eventListener", //Sendo que eventListener deve ser uma função já presente na página<br>
                    "onStart": "eventListener",<br>
                    "onFinish": "eventListener"<br>
            }<br>
  });</code>
 </br>
</br>
  <h4>No Javascript coloque o seguinte código para Mídias LIVE:</h4>
  <code>var player = new SambaPlayer("player", { //player é o ID do elemento html que ele vai inserir o iframe<br>
        height: 360,<br>
        width: 640,<br>
        ph: "f8a0041cfa9b4783095c333892184a65",//Player Hash do projeto<br>
        live: "1a4a3ab41d47b4019e6fa12f085b5804",//LiveChannelID<br>
        playerParams: { //Veja a lista de Parâmetros suportados<br>
                enableShare: true<br>
        },<br>
        events: { //Funcoes que escutam os eventos do player<br>
                "onLoad": "eventListener", //Sendo que eventListener deve ser uma função já presente na página<br>
                    "onStart": "eventListener",<br>
                    "onFinish": "eventListener"<br>
            }<br>
  });</code>
  <hr>
  <h2>Abaixo veja uma demonstração mais completa de nossos eventos e métodos:</h2>
</div>

<div class="col-md-7">
    <div id="player"></div>
    <div class="btn-group">
      <button id="play" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-play"></span> Play
      </button>
      <button id="pause" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-pause"></span> Pause
      </button>
      <button id="seek" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-backward"></span>
        <span class="glyphicon glyphicon-forward"></span> Seek to 00:20
      </button>
      <button id="status" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-indent-left"></span> Player Status
      </button>
      <button id="volume" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-volume-up"></span> Volume 20%
      </button>
      <button id="mute" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-volume-off"></span> Mute
      </button>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">Função chamada: <code id="function"></code></div>
    </div>
</div>
<div id="right-container" class="col-md-5 pull-right">
  <hr>
  <div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Eventos</div>
    <!-- Table -->
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Nome</th>
          <th>Valor</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="event"></td>
          <td class="value"></td>
        </tr>
        <tr>
          <td class="eventlisten"></td>
          <td class="valuelisten"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">Status</div>
    <table class="table table-bordered">
      <tbody id="tbody">
        <tr>
          <td class="statuslisten"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="col-md-12">
    <div class="panel">
      <h3>Descrição dos estados do player</h3>
      <ul class="list-group">
        <li class="list-group-item"><b>1</b>: player tocado uma vez e terminado</li>
        <li class="list-group-item"><b>2</b>: player "buffering"</li>
        <li class="list-group-item"><b>3</b>: player tocando o vídeo</li>
        <li class="list-group-item"><b>4</b>: player pausado</li>
      </ul>
    </div>
    <hr>
    <div class="panel">
      <h3>Eventos do player ( descubra mais com nossos plugins no <a style="color: #0000EE;" href="https://labs.sambatech.com/">SambaLabs</a>!! )</h3>
      <ul class="list-group">
        <li class="list-group-item"><b>onLoad:</b> Iframe carregado e player disponível para interação</li>
        <li class="list-group-item"><b>onStart:</b> Evento de play disparado pela primeira vez</li>
        <li class="list-group-item"><b>onPause:</b> Usuário saiu do estado de "play" para o estado de "pause"</li>
        <li class="list-group-item"><b>onResume:</b> Player saiu do estado de "pause"</li>
        <li class="list-group-item"><b>onSeek:</b> Usuário usando a barra de progresso para navegar na mídia</li>
        <li class="list-group-item"><b>onCuepoint:</b> Player passou por um dos cuepoints cadastrados ( default: 0%, 25%, 50%, 75%, 100%)</li>
        <li class="list-group-item"><b>onMediaView:</b> Player passou por um dos mediaViews: 0%, 25%, 50%, 75%, 100%</li>
        <li class="list-group-item"><b>onProgress:</b> Disparado enquanto o player está tocando atualizando o tempo atual do vídeo</li>
        <li class="list-group-item"><b>onFinish:</b> Mídia chegou ao fim</li>
        <li class="list-group-item"><b>onError:</b> Houve algum erro na mídia que impediu sua execução ( detalhe: considerados apenas erros pós carregamento bem sucedido do player )</li>
      </ul>
    </div>
</div>

<script type="text/javascript" samba-player-api="player" src="https://player.sambatech.com.br/v3/samba.player.api.js"></script>
<script type="text/javascript">
  var eventTd = document.getElementsByClassName('event')[0];
  var valueTd = document.getElementsByClassName('value')[0];
  var eventListenTd = document.getElementsByClassName('eventlisten')[0];
  var valueListenTd = document.getElementsByClassName('valuelisten')[0];
  var buttonDiv = document.getElementsByClassName('btn-group')[0];
  var statusListenTd = document.getElementsByClassName('statuslisten')[0];


  function eventListener(player) {
    if(player.event != 'onListen') {
      valueTd.innerHTML = "";
      eventTd.innerHTML = player.event;
      if(player.eventParam) {
        if(typeof player.eventParam === 'object') {
          valueTd.innerHTML = JSON.stringify(player.eventParam);
        }else {
          valueTd.innerHTML = player.eventParam;
        }

      }

      if(player.event == 'onResizeActive') {
        document.getElementById('right-container').className ="col-md-3 pull-right";
        document.getElementsByName("cd023ef9950652a81d2c42747b3b960e")[0].width = 640 + 200;
      }else if(player.event == 'onResizeDeactive'){
        document.getElementById('right-container').className ="col-md-5 pull-right";
        document.getElementsByName("cd023ef9950652a81d2c42747b3b960e")[0].width = 640;
      }
    }else if(player.event == 'onListen'){
      valueListenTd.innerHTML = "";
      eventListenTd.innerHTML = player.event;
      valueListenTd.innerHTML = player.eventParam;
    }

    if(player.event == "onStart" || player.event == "onFinish") {
      statusListenTd.innerHTML = player.event;
    }
  }

  //Bind no botão
  var muted = false;
  buttonDiv.addEventListener('click', function(evt){
    var fnstring = "";
    switch(evt.target.id) {
    case 'play':
      fnstring = "player.play()";
      player.play();
      break;
    case 'pause':
      fnstring = "player.pause()";
      player.pause();
      break;
    case 'seek':
      fnstring = "player.seek(20)";
      player.seek(20);
      break;
    case 'status':
      fnstring = "player.getStatus(callback)";
			player.getStatus(function(media){
				var value = "";
				for(var key in media.status) {
          var val = (typeof media.status[key] !== 'number') ? media.status[key]: media.status[key].toFixed(2);
					value += "<tr><td>" + key + "</td><td>" + val + "</td></tr>";
				}
        document.getElementById("tbody").innerHTML = value;
			});
      break;
    case 'volume':
      fnstring = "player.setVolume(20)";
      player.setVolume(20);
      break;
    case 'mute':
      if(!muted) {
        muted = true;
        evt.target.querySelector('span').classList.remove('glyphicon-volume-off');
        evt.target.querySelector('span').classList.add('glyphicon-volume-up');
        fnstring = "player.mute()";
        player.mute();
      }else {
        muted = false;
        evt.target.querySelector('span').classList.remove('glyphicon-volume-up');
        evt.target.querySelector('span').classList.add('glyphicon-volume-off');
        fnstring = "player.unmute()";
        player.unmute();

      }
      break;
    }
    document.getElementById('function').innerHTML = fnstring;
    evt.preventDefault();
  }, false);

  var playerConfig = {
      height: 360,
      width: 640,
      ph: "67490c1445c946bd1350f07dca0ec47a",
      m: "9c91940c22cfb93549a161fb8d645722",
      events: {
        "*": "eventListener"
      },
      playerParams: {
        wideScreen: true
      }
  };
  var player = new SambaPlayer("player", playerConfig);
</script>