Playlist

Faça uma Playlist de vídeos usando nossa API JavaScript

Instruções

Para usar a playlist basta construir a lista e adicionar no elemento que deseja que seja o "disparador" a classe samba-playlist-trigger e um atríbuto chamado data-mediaid com o id da mídia. Para instanciar a API basta passar um objeto da playlist passando uma playerhash e os ids das mídias.

Obs: Neste caso contamos com a ajuda do "bootstrap.css" para o nosso layout

Opções

Preview

Rap Pagode Blues

Novo embed

<div class="row">
	<div class="col-xs-4 col-md-4" id="player"></div>
	<div class="col-xs-3 col-md-3 pull-right">
		<div id='list' class="list-group">
			<a href="#" class="samba-playlist-trigger list-group-item active" data-mediaid="81e961ec6b981a32e666a7386ba7ae00">Rap</a>
			<a href="#" class="samba-playlist-trigger list-group-item" data-mediaid="6b44b67b7222705f2283d580800e738a">Pagode</a>
			<a href="#" class="samba-playlist-trigger list-group-item" data-mediaid="878c6dfa40a8cfc7ed1df0939569fe56">Blues</a>
		</div>
	</div>
</div>

<!--<script type="text/javascript" samba-player-api="player" src="https://player.sambatech.com.br/v2current/samba.player.api.js"></script>-->
<script type="text/javascript" samba-player-api="player" src="https://player.sambatech.com.br/v3/samba.player.api.js"></script>
<!--<script type="text/javascript" samba-player-api="player" src="http://192.168.0.63:8000/samba.player.api.js?iframeURL=prod"></script>-->

<script type="text/javascript">// <![CDATA[
  var numMediaObj = 1;

	function eventListener(player){
	}

	function onClick(mediaId, evt){
    if (evt.isTrusted && player.sequence) {
      numMediaObj = findMediaPosition(playlistObj.medias, 'id', mediaId) + 1
    }
    document.getElementsByClassName('samba-playlist-trigger list-group-item active')[0].className = 'samba-playlist-trigger list-group-item';
    evt.target.className = "samba-playlist-trigger list-group-item active";
  }

  function onLoad(event) {
    if(player.autoplay) {
      if(numMediaObj <= playlistObj.medias.length) {
        player.play();
        numMediaObj++;
      } else {
        numMidiaObj = 1
      }
    }
  }

  function findMediaPosition(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return i;
        }
    }
  return null;
  }
// ]]></script>

<script id="playlist" type="text/javascript">// <![CDATA[
	var playlistObj = {
		titles: ['Rap', 'Pagode', 'Blues'],
		ph: '67490c1445c946bd1350f07dca0ec47a',
		medias: [{id: '81e961ec6b981a32e666a7386ba7ae00', title: 'Rap'}, {id:'6b44b67b7222705f2283d580800e738a', title: 'Pagode'}, { id: '878c6dfa40a8cfc7ed1df0939569fe56', title: 'Blues'}],
		onClick: 'onClick',
		loop: true,
		timeout: 5,
		autoplay: true,
    sequence: true,
	};
// ]]></script>

<script type="text/javascript">// <![CDATA[
	var player = new SambaPlayer("player", {
		height: 270,
		width: 480,
		playlist: playlistObj,
		playerParams: {
			volume: 0,
			startOutput: '480p',
			html5: true
		},
		events: {
					"*": "eventListener",
          "onLoad": "onLoad",
		}
	});
// ]]></script>

Obs: Alguns editores de conteúdo como o Wordpress e Ghost podem alterar o código colado. Certifique-se se o código está igual ao informado aqui e, se possível, coloque o Javascript em um arquivo externo.