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>Got any questions or want to know more?
Just call us in our support chat and our team will do their best to solve your doubts or difficulties? Already use Panda Video? If not, know that both our player and our prices are unbeatable, if you are interested, take a look at our plans, in this way, it may be that some of them make sense with your product and as a gift you will still become another little panda. 🐼
Updated on: 04/11/2023
Thank you!