Como mudar o indicador de mudo?
Como mudar o indicador de mudo?
Se você não gosta do layout do indicador de mudo (aquele que aparece mostrando que o vídeo está executando e que deve clicar para ativar o som), saiba que é possível alterar o layout da maneira que você quiser, utilizando imagem, vários elementos por cima do vídeo ou qualquer outra ação. O código que vamos mostrar abaixo, utiliza a API da Panda e, embora possa parecer complicado, é dividido em duas partes (estilo dos itens em cima do vídeo e a ação de clique em cima dela).
Código Embed
O código embed da página de vídeo deve ter algumas pequenas modificações para que seja possível a integração com a API. Observe logo após o ID do vídeo no atributo src que temos alguns parâmetros como controls, alternativeProgress, autoplay, muted, smartAutoplay e initDisabledControls. É interessante que eles estejam direto na página para que eles tenham prioridade sobre qualquer configuração que possa existir no dashboard da Panda, garantindo uma melhor compatibilidade com o código script que vem em seguida.
<!-- SUBSTITUA O CÓDIGO EMBED -->
<iframe
id="panda-3b101f05-84aa-4de0-9b64-71f1855388af"
src="https://player-vz-ded14ebd-85a.tv.pandavideo.com.br/embed/?v=3b101f05-84aa-4de0-9b64-71f1855388af&controls=play-large&alternativeProgress=true&autoplay=true&muted=true&smartAutoplay=false&initDisabledControls=true"
style="border:none;position:absolute;top:0;left:0;"
allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture"
allowfullscreen=true
width="100%"
height="100%">
</iframe>Tag Script
Aqui é onde tudo acontece, basta especificar o ID dos elementos CUSTOM_ITEMS_CONTAINER que deve ser usado para exibição por cima do player e o evento onReady do player irá ser ativado assim que o vídeo for carregado, adicionando o controle de clique. Ao ser clicado, os controles são exibidos (foram iniciados acima com initDisabledControls), o tempo inicia desde o início com setCurrentTime(0) e o volume é aumentado com setVolume(1).
<script async src="https://player.pandavideo.com.br/api.v2.js"></script>
<script>
const CUSTOM_ITEMS_CONTAINER = document.querySelector('#items-container');
window.pandascripttag = window.pandascripttag || [];
window.pandascripttag.push(function () {
const p = new PandaPlayer(document.querySelectorAll(`iframe[id^=panda-]`)[0].getAttribute('id') , {
onReady() {
// ao clicar no container do indicador de mudo customizado
CUSTOM_ITEMS_CONTAINER.onclick = function () {
CUSTOM_ITEMS_CONTAINER.style.display = 'none';
p.showControls();
p.setCurrentTime(0);
p.setVolume(1);
}
}
});
});
</script>Código completo
O código acima já é suficiente para anexar o clique no elemento com id items-container. Neste caso, basta estilizar da maneira que você quiser: imagens, botões, texto, animações ou qualquer outra coisa por cima do player. O código abaixo é um código de exemplo, que pode (e deve) ser alterado da maneira que você quiser. No exemplo abaixo, ele toma 100% da largura e altura, basta você editar como quiser, substituindo as imagens (que estão em base64 também).
<style>
#panda-container {
position: relative;
padding-top: 56.25%;
}
#items-container {
position: absolute;
display: flex;
top: 0px;
width: 100%;
height: 100%;
z-index: 2;
}
#items-container > div {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
cursor: pointer;
position: relative;
}
.icon {
max-width: 130px;
max-height: 130px;
z-index: 6;
}
.audio_play_button {
position: absolute;
right: 16px;
top: 10px;
width: 130px;
height: 40px;
z-index: 6;
}
</style>
<div id="panda-container">
<!-- Itens de indicador de mudo personalizado abaixo -->
<div id="items-container">
<div>
<img src="https://storage.crisp.chat/users/helpdesk/website/5efce8ce8b62b000/image-73_uzjcow.png" class="audio_play_button"/>
<img src="https://storage.crisp.chat/users/helpdesk/website/5efce8ce8b62b000/cbimage-2_1ps6ye6.png" class="icon"/>
</div>
</div>
<!-- Substitua o iframe abaixo pelo seu próprio vídeo hospedado na Panda -->
<!-- Certifique-se que você alterou a parte final do "src" que tem os controls, etc... -->
<iframe
id="panda-5123ab3b-9080-4d36-a7e7-f744fc28edf6"
src="https://player-vz-12dc5645-25b.tv.pandavideo.com.br/embed/?v=5123ab3b-9080-4d36-a7e7-f744fc28edf6&controls=play-large&alternativeProgress=true&autoplay=true&muted=true&smartAutoplay=false&initDisabledControls=true"
style="border:none;position:absolute;top:0;left:0;"
allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture"
allowfullscreen=true
width="100%"
height="100%">
</iframe>
</div>
<script async src="https://player.pandavideo.com.br/api.v2.js"></script>
<script>
const CUSTOM_ITEMS_CONTAINER = document.querySelector('#items-container');
window.pandascripttag = window.pandascripttag || [];
window.pandascripttag.push(function () {
const p = new PandaPlayer(document.querySelectorAll(`iframe[id^=panda-]`)[0].getAttribute('id') , {
onReady() {
// ao clicar no container do indicador de mudo customizado
CUSTOM_ITEMS_CONTAINER.onclick = function () {
CUSTOM_ITEMS_CONTAINER.style.display = 'none';
p.showControls();
p.setCurrentTime(0);
p.setVolume(1);
}
}
});
});
</script>Ainda tem alguma dúvida?
Chame a gente no suporte que faremos o possível para te ajudar a implementar o código acima na sua página. Apenas, certifique-se que os elementos estão bem posicionados e corretamente alinhados no CSS da sua página
Atualizado em: 30/09/2022
Obrigado!