Documentação: Embed do Player

Paula Fernandes
  1. Passos para implementação
  2. Personalização do Template (Criando o seu Template) - Modo Avançado
  3. Exemplo de Template - Modo Avançado
  4. Baixar o pacote para personalizar Template

Para incorporar o Player em seu site, blog, basta seguir esses passos.

Passos para integrar o embed em seu site

Você pode escolher um de nossos temas já predefinidos. Para isto, visite Meu Vagalume e entre uma playlist. Nas opções é possível adaptar cores e detalhes do tema conforme suas preferências.

Assim que estiver do jeito que preferir, será gerado um código conforme a configuração de sua escolha, com o tema predefinido.

Uma vez gerado este código, você poderá inserí-lo na sua página e conferir o resultado, podendo personalizar manualmente com os parâmetros a seguir:

Onde os parâmetros são:

playlistID Id da playlist que queira executar no player, caso não for passado será executado o TOP 20 músicas do mês do site Vagalume; color1 Mudar cor principal do Player; color2 Mudar cor de detalhes do Player; loop No fim da reprodução da playlist, tocá-la novamente;

Ou então poderá criar um template totalmente novo com sua personalização


Personalização de template

Você poderá baixar o template, editar e ajustar conforme preferir.

A estrutura do Template é composta pelas seguintes partes:






	
	Nome do Template

Ao final do template, antes de fechar a tag '' colocaremos o carregamento do script do Player

Usamos o objeto de configuração acima para que o player saiba onde e como deve aplicar suas preferências. Os valores permitidos são:

template Nome do template que está sendo criado. Por padrão é vagalume-player-template; content Nome do elemento onde será inerido o template. O padrão é uma tag section com o id vagalume-embedPlayer; playlistID ID da playlist onde será feito o carregamento das músicas no player, exemplo - "https://meu.vagalume.com.br/sitevagalume/playlist/4939227/" O ID dessa playlist é : 4939227; Caso informe nenhum ID, automaticamente será exibida uma playlist com o TOP 20 músicas do mês do site Vagalume.

Também lhe é permitido usar o objeto de configuração dos eventos do player. Por exemplo, quando o Player pausa, avança de música, play, etc.

vagalume.player.on('playing',function(){
	//eventos do player
})

Módulos do Template

Os módulos estão estruturados em tags <script>, cada um atribuíndo a uma variável para ser usado no Template Principal e deverão ser ins inseridos no começo do template, após a tag '<body>' de preferência Cada um dos módulos pertence as seguintes varíáveis:

Playlist {{>playlist}}
Música atual {{gt;currentSong}}
Player {{gt;player}}
Informações básicas da playlist 
	{{#if newPlaylist.playlistData}}
	

	{{newPlaylist.playlistData.userName}}
	{{newPlaylist.playlistData.descr}}
	{{newPlaylist.playlistData.userLogin}}
	{{/if}}

Template principal

Este template é onde devem ser usadas as variáveis e os módulos.

Crie seu embed

Criaremos o iframe para ser implementado em qualquer lugar do seu site. Obtendo o template que foi criado e passando para o iframe.

Podendo a url tendo os seguintes parãmetros:

playlistIDId da playlist que queira executar no player, caso não for passado será executado o TOP 20 músicas do mês do site Vagalume; color1Mudar cor principal do Player; color2Mudar cor de detalhes do Player; loopNo fim da reprodução da playlist, tocá-la novamente;

Template de exemplo





	
	Nome do Player

Baixe o template de exemplo

Clique aqui para Baixar