Artigos sobre: Páginas de Vendas

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

Este artigo foi útil?

Compartilhe seu feedback

Cancelar

Obrigado!