Samba Player
Aqui você poderá ver os parâmetros usados por nosso player assim como o uso da api para integrá-lo da melhor forma possível em sua página
Incorporar o Player Samba e utilização de Parâmetros do Player:
Visão Geral
Esta documentação guia o usuário em como incorporar o player Samba em sua aplicação e também como utilizar os parâmetros disponíveis no player incorporado.
O player samba pode ser incorporado em uma página web usando a tag iframe. Você também pode incorporar o player em sua página utilizando a API Java Script do player, conforme abordado mais adiante nesta documentação, ou
Esta página define todos os parâmetros atualmente suportados pelo player Samba. Dica: Para permitir uma melhor experiência em sua aplicação, as dimensões de largura e altura do player Samba devem ter pelo menos 320px por 168px.
Incorporando o player Samba.
Você pode usar qualquer um dos métodos a seguir para incorporar o player Samba em sua página e especificar os parâmetros do player. Note que as instruções abaixo demonstram como incorporar um player que carrega um único video em uma página web.
- IFrame Tags
Ao definir uma tag iframe em sua página, em que o src URL especifica o conteúdo que o player Samba irá carregar, bem como quaisquer outros parâmetros do player que você deseja adicionar ao src URL. Parâmetros de altura (height) e largura (width) da tag iframe especificam as dimensões de exibição do player Samba.
Se você mesmo estiver criando seu elemento iframe (ao invés de copiar diretamente do Samba Videos), você pode inserir parâmetros do player no final da URL. A URL tem o seguinte formato:
Ps: Nosso player utiliza o a propriedade document.referrer para pegar a URL da página principal. Evite o uso da metatag <meta name="referrer" content="never" /> se usá-lo com restrição de domínio.
Exemplo de uso:
A tag iframe abaixo deve carregar um player com as dimensões 640px x 390px que irá tocar o video de media_Id ‘4226a0781346e04d0002a12fa54c0d19’ do projeto com player_hash ‘5563565fba098a75c00ea9223b4ce69d’ Uma vez que a URL tem o parâmetro autoStart=true adicionado, o video irá tocar automaticamente assim que carregar no browser.
Parâmetros Player
Os parâmetros apresentados a seguir são opcionais. A lista mostra aqueles que são suportados também para o player Samba HTML 5. Nota: Para o player Samba ter total compatibilidade com HTML 5 é necessário incorporar os seguintes parâmetros na tag iframe para a funcionalidade de Fullscreen:
- allowfullscreen
- webkitallowfullscreen
- mozallowfullscreen
Exemplo de uso VOD:
<iframe allowfullscreen webkitallowfullscreen mozallowfullscreen src="https://fast.player.liquidplatform.com/pApiv2/embed/da7ea873fdf69b1d821613c847c56a35/c9a6802f92726d104fa8c767d907f423" width="640" height="360" frameborder="0"></iframe>Exemplo de uso Live:
<iframe allowfullscreen webkitallowfullscreen mozallowfullscreen src="https://fast.player.liquidplatform.com/pApiv2/embed/7308d46a10eb5bef20e29516ca918f65/live/1a4a3ab41d47b4019e6fa12f085b5804" width="640" height="360" frameborder="0"></iframe>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 JavasScript 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+. Para incorporar o player Samba pela API JavaScript é necessário chamar em seu código a API:
initialTime
Valores: number. Função parecida com o onResume mas sem a tela inicial de escolha para o usuário. Com o parâmetro o vídeo vai começar a tocar do segundo que você deseja. Pode ser usado com o autoStart=true Padrão 0.
hidePlayBtn
Valores: boolean. Ao ser setado como true o player deixa de exibir o botão de Play no início do vídeo. Vale lembrar que a área continua clicável para ação do usuário. Padrão false.
accessibility
Valores: true, false, speech e listen. O padrão é false.
Habilita o modo de acessibilidade do Player. Os controles ficam sempre vísiveis e é compatível em ações básicas ( play, pause e volume ) com softwares de leitura ( validado no Jaws ). Os parâmetros speech e listen adicionam funcionalidades de acessibilidade ao player. Sabia mais!!!
sb360
Valores:true ou false. O padrão é false.
Habilita a exibição de vídeos em 360 graus. Para maiores detalhes visite nossa página do Samba Labs.
captionTheme
Valores: Array com 4 elementos. Ex.: [ffffff, G, pt-br, true]
Posição 0: Recebe a cor em hexadecimal ou null
Posição 1: Recebe o tamanho da fonte, podendo ser um número inteiro (pixels), medidas P, M ou G, ou null
Posição 2: Recebe o idioma em que a legenda começará ativa (formato lang) ou null
Posição 3: Recebe um booleano que informa se as legendas terão background ou null
fsOnStart
Valores: true e false Padrão é false. Player html5 entra em modo fullscreen após o começo do vídeo. Observação: não funciona com o parâmetro autoStart=true e em mídias com propagandas
outputs
Valores: Formatos de output separados por vírgula ( exemplo outputs=240p,360p ) ou apenas um ( outputs=240p ). Padrão são os gerados na platforma.
Esse parâmetro limita a quantidade de outputs que você deseja que o Samba Player deva apresentar para o usuário escolher. Se escolher apenas um não haverá a opção de troca de output na barra de controle do Samba Player
cast
Valores: true, false Padrão true. Apresenta a opção de Chromecast no Google Chrome ( desktop ou mobile ). Suporte a vídeos VOD com propaganda LiveRail
Obs: A funcionalidade não se aplica com o uso de WebView.
age
Valores: true, false ou number ( ex: age=true ). Padrão false. Ativa o comportamento de restrição de idade do player. Ao passar o parâmetro true é exibida uma validação simples de "sim" ou "não". Ao usar um número correspondente a idade em anos mínima, é exibido um input para o usuário digitar sua data de nascimento
resume
Valores: true, false ou number ( ex: resume=43 ). Padrão é false. Ativa o comportamento de resume do player. Ao passar o parâmetro true é feito automaticamente pelo player de acordo com a última visualização do usuário no mesmo navegador. Ao usar um número o vídeo é resumido a partir deste em segundos.
autoStart
Valores: true ou false. Padrão é false. Define se o player inicia automaticamente ou não após carregado.
enableControls
Valores: true, false ou array. Padrão é true. Define se o player exibe ou não a barra de controle. Com a opção de passar um array fica permitido mostrar apenas os controles definidos nele. Valores permitidos: play, pause, backward, forward, seekbar, pip, search, time, settings, fullscreen, sb360, speed, quality, subtitles. Exemplo e uso: enableControls=[fullscreen] ( apresentará apenas o fullscreen ). Observação: Para o parâmetro enableControls=[x] funcionar é necessário que os controles e o fullscreen sejam habilitados no Sambavideos.
enableShare
Valores: true ou false. Padrão é true. Define se o player exibe ou não as opções de compartilhamento.
hasTwitter
Valores: true ou false. Padrão é true. Define se o player exibe ou não o botão de compartilhamento com o twitter nas opções de compartilhamento.
hasFacebook
Valores: true ou false. Padrão é true. Define se o player exibe ou não o botão de compartilhamento com o Facebook nas opções de compartilhamento.
hasEmbed
Valores: true ou false. Padrão é true. Define se o player exibe ou não o botão de compartilhamento para cópia do embed do video nas opções de compartilhamento.
hasLink
Valores: true ou false. Padrão é true. Define se o player exibe ou não o botão de compartilhamento para cópia do link do video nas opções de compartilhamento.
startOutput
Valores: 240p, 360p, 480p, 720p ou 1080p. Define qual output o player iniciará tocando. Nota: É necessário que o vídeo tenha o output indicado. Caso contrário, será tocado o valor default do projeto.
gaAccount
Valores: Tracking ID do Google Analtycs, que é uma string tipo ‘UA-000000-01’. Parâmetro utilizado para enviar eventos de tracking: loaded, started, first quartile, mid point, third quartile e completed, para análise de estatísticas de visualização do video com sua conta do Google Analytics.
thumbnailURL
Valores: URL da imagem a ser inserida como thumbnail da mídia. Parâmetro que permite passar um thumbnail ao vídeo a partir de uma url.
thumbnailMaxQuality
Valores: true ou false.
Parâmetro utilizado para informar se a capa do vídeo deve ter a thumb de melhor qualidade, ou deve seguir a proporção da tela.
title
Valores: Título da mídia.Parâmetro utilizado para definir um título para a mídia.
volume
Valores: inteiro: 0 .. 100. Parâmetro que permite associar um valor pré-definido ao volume do player antes do vídeo começar a tocar.
siteURL
Valores: URL que se deseja enviar como referring ao Google Analytics. Parâmetro utilizado para definir uma referring URL customizada para envio de estatísticas ao Google Analytics.
enableLead
Valores: true/false ou uma string, separada por vírgula, dos seguintes valores: email,name,phone. Padrão é false. Ativa ou Desativa o coletor de Leads de uma determinada mídia. Nota: Via parâmetro, o coletor de Leads é exibido somente ao fim da exibição do video.
ad_program
Valores: URL da VAST tag a ser tocada. Parâmetro que permite tocar qualquer publicidade externa no padrão VAST.
Se for uma publicidade Pre-roll deve-se colocar ao fim da tag o parâmetro #pre-roll, se for Post-roll deve utilizar o parâmetro #post-roll, se for overlay, deve utilizar o parâmetro #overlay.
Ps: Para rodar no html5 a publicidade deve ser compatível com o formato. Exemplo de uso para uma campanha de publicidade Pre-Roll:
ad_program=[http://ad3.liverail.com/?LR_PUBLISHER_ID=1331&LR_CAMPAIGN_ID=229&LR_SCHEMA=vast2#pre-roll]
safarihtml5
Valores: true ou false.
Parâmetro utilizado para player ser construído em html5 no safari, e assim o player ter as opções de configuração de qualidade no safari. O uso deste parâmetro não é recomendado pois pode ocasionar erros desconhecidos.
trafficEconomy
Valores: true ou false.
Parâmetro utilizado para o player identificar quando o usuário não está na aba do navegador onde se encontra o video e reduzir a qualidade da transmissão automaticamente para economizar trafégo, quando o usuário retornar a aba, a qualidade da transmissão é restaurada.
thumbnailFit
Valores: true ou false.
Parâmetro utilizado para informar se a capa do vídeo deve preencher todo o espaço do player, ou deve seguir a proporção da imagem.
disableIosFullscreen
Valores: true ou false.
Parâmetro utilizado para impedir que o player entre em modo tela cheia no IOS.
iosFullscreenAlert
Valores: true ou false.
Parâmetro utilizado para criar um alerta no player quando o usuário estiver utilizando IOS e tentar ativar o modo de tela cheia. Neste alerta o usuário é informado que algumas funcionalidades serão desabilitadas e poderá escolher prosseguir ou cancelar. Caso o usuário prossiga, o aviso não aparecerá novamente.
keepLastQuality
Valores: true ou false.
Parâmetro utilizado para manter a qualidade da resolução definida pelo usuário nos vídeos. Desta forma, ao trocar de vídeo, o próximo vídeo terá a mesma resolução que foi definida anteriormente.
hidePlayBtn
Valores: boolean. Ao ser setado como true o player deixa de exibir o botão de Play no início do vídeo. Vale lembrar que a área continua clicável para ação do usuário. Padrão false.
accessibility
Valores: true, false, speech e listen. O padrão é false.
Habilita o modo de acessibilidade do Player. Os controles ficam sempre vísiveis e é compatível em ações básicas ( play, pause e volume ) com softwares de leitura ( validado no Jaws ). Os parâmetros speech e listen adicionam funcionalidades de acessibilidade ao player. Sabia mais!!!
fsOnStart
Valores: true e false Padrão é false. Player html5 entra em modo fullscreen após o começo do vídeo. Observação: não funciona com o parâmetro autoStart=true e em mídias com propagandas
type
Valores: AUDIOLIVE. Quando transmitir uma live com apenas áudio esse parâmetro é obrigatório para um melhor comportamento do player. Recomendável também o uso de width=480 e height=102 no iframe
primaryLive
Valores: string. Comportamento semelhante ao alternateLive mas deverá ser usado junto com o backupLive. Usa a url dada como streaming do live. Terminando em .f4m ela é usada diretamente. Senão terminar é adicionado o livestream.f4m ao final. Padrão null. Nota: Recomendável não usar em conjunto com o streamName e alternateLive.
backupLive
Valores: string. Usado junto com o primaryLive será a segunda URL que o player tentará fazer uma transmissão ao vivo se algo estiver errado com a primária.
streamName
Valores: Nome do streaming. Por padrão o colocamos no formato: http://livebr.sambatech.com.br/hds-live/streams/livepkgr/events/{streamname}_{ph}/liveevent/livestream.f4m. Padrão null. Nota: Recomendável não usar em conjunto com o alternateLive.
alternateLive
Valores: Usa a url dada como streaming do live. Terminando em .f4m ela é usada diretamente. Se não terminar é adicionado o livestream.f4m ao final. Padrão null. Nota: Recomendável não usar em conjunto com o streamName.
autoStart
Valores: true ou false. Padrão é false. Define se o player inicia automaticamente ou não após carregado.
enableControls
Valores: true, false ou array. Padrão é true. Define se o player exibe ou não a barra de controle. Com a opção de passar um array fica permitido mostrar apenas os controles definidos nele. Valores permitidos: seekbar (apenas VOD), settings, fullscreen, play, time (apenas VOD), volume, forward, backward, quality, speed, subtitles. Exemplo e uso: enableControls=[fullscreen] ( apresentará apenas o fullscreen ). Observação: Para o parâmetro enableControls=[x] funcionar é necessário que os controles e o fullscreen sejam habilitados no Sambavideos.
enableShare
Valores: true ou false. Padrão é true. Define se o player exibe ou não as opções de compartilhamento.
hasTwitter
Valores: true ou false. Padrão é true. Define se o player exibe ou não o botão de compartilhamento com o twitter nas opções de compartilhamento.
hasFacebook
Valores: true ou false. Padrão é true. Define se o player exibe ou não o botão de compartilhamento com o Facebook nas opções de compartilhamento.
hasEmbed
(players suportados: flash)
Valores: true ou false. Padrão é true. Define se o player exibe ou não o botão de compartilhamento para cópia do embed do video nas opções de compartilhamento.
hasLink
(players suportados: flash)
Valores: true ou false. Padrão é true. Define se o player exibe ou não o botão de compartilhamento para cópia do link do video nas opções de compartilhamento.
gaAccount
Valores: Tracking ID do Google Analtycs, que é uma string tipo ‘UA-000000-01’. Parâmetro utilizado para enviar eventos de tracking: loaded, started, first quartile, mid point, third quartile e completed, para análise de estatísticas de visualização do video com sua conta do Google Analytics.
thumbnailURL
Valores: URL da imagem a ser inserida como thumbnail da mídia. Parâmetro que permite passar um thumbnail ao vídeo a partir de uma url.
title
Valores: Título da mídia.Parâmetro utilizado para definir um título para a mídia.
volume
(players suportados: flash, html5 desktop)
Valores: inteiro: 0 .. 100. Parâmetro que permite associar um valor pré-definido ao volume do player antes do vídeo começar a tocar.
siteURL
Valores: URL que se deseja enviar como referring ao Google Analytics. Parâmetro utilizado para definir uma referring URL customizada para envio de estatísticas ao Google Analytics.
trafficEconomy
Valores: true ou false.
Parâmetro utilizado para o player identificar quando o usuário não está na aba do navegador onde se encontra o video e reduzir a qualidade da transmissão automaticamente para economizar trafégo, quando o usuário retornar a aba, a qualidade da transmissão é restaurada.
thumbnailFit
Valores: true ou false.
Parâmetro utilizado para informar se a capa do vídeo deve preencher todo o espaço do player, ou deve seguir a proporção da imagem.
iosFullscreenAlert
Valores: true ou false.
Parâmetro utilizado para criar um alerta no player quando o usuário estiver utilizando IOS e tentar ativar o modo de tela cheia. Neste alerta o usuário é informado que algumas funcionalidades serão desabilitadas e porderá escolher prosseguir ou cancelar. Caso o usuário prossiga, o aviso não aparecerá novamente.
disableIosFullscreen
Valores: true ou false.
Parâmetro utilizado para impedir que o player entre em modo tela cheia no IOS.
lowLatency
Valores: true ou false.
Parâmetro utilizado para reduzir a latência da Live em até 20 segundos - resultando em envio de quadros mais rápido na transmissão. É recomendado que esse parâmetro seja utilizado apenas em Live 3.0, para que não ocorra instabilidades na transmissão.
Métodos E Eventos
A API do Player Samba permite a você incorporar o player em sua aplicação e controlá-lo utilizando JavaScript.