Articles on: Sales Pages

How to use a custom muted indicator?

How to use a custom muted indicator icon?



If you don't like the layout of our "muted indicator" icon and animation, you can create a custom layout and change any image, video or control you want. The code that we are going to show uses the Panda API and although it looks be complicated, this example is divided into two parts (style of the items below on top of the video and the click action) .

Embed Code



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.

The embed code of the video must have some minor modifications in order to be able to integrate smoothly with the API. Notice right after the video ID in the src attribute there are other parameters like controls, alternativeProgress, autoplay, muted, smartAutoplay and initDisabledControls. These extra parameters will control the look and behavior of the video, regardless what you configure in our dashboard. You could also not use them if you wish, but it's recommended.

<!-- REPLACE DE EMBED CODE WITH YOUR OWN VIDEO -->
<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).

This is where it all happens, just specify the ID of the CUSTOM_ITEMS_CONTAINER elements that should be used to display above the player and the onReady event of the player will be activated as soon as the video is loaded, adding your custom click control. When it's clicked, the video controls are displayed back (they were started above with initDisabledControls), the time starts from the beginning with setCurrentTime(0) and the volume is increased with 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() {
            // on click on custom muted indicator items container
            CUSTOM_ITEMS_CONTAINER.onclick = function () {
                CUSTOM_ITEMS_CONTAINER.style.display = 'none';
                p.showControls();
                p.setCurrentTime(0);
                p.setVolume(1);
            }
        }
    });
});
</script>


Código completo



The code above is enough to attach the click to the element with id items-container. In this case, just style it the way you want: images, buttons, text, animations or anything else on top of the player. The code below is a sample code, which can (and should) be changed however you want. In the example below, it takes 100% of the width and height, just edit as you want, replacing the images (which are in base64 for learning only).

<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">
        <!-- Custom muted indicator items below -->
        <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>
        <!-- Replace the iframe with your own video from Panda -->
        <!-- Make sure you keep the controls, alternativeProgress and other extra parameters -->
        <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() {
                    // on click on custom muted indicator items container
                    CUSTOM_ITEMS_CONTAINER.onclick = function () {
                        CUSTOM_ITEMS_CONTAINER.style.display = 'none';
                        p.showControls();
                        p.setCurrentTime(0);
                        p.setVolume(1);
                    }
                }
            });
        });
    </script>


Do you have any questions?



Let our support team know what you need and we'll be more than happy to help you. If the code doesn't work as expected, make sure your additional elements are well designed and correctly positioned in your page.

Updated on: 09/30/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!