Autoplay in panda player api

Question

I need to configure this code so that it works in autoplay, but I'm not able to do it in any way. I'm using the panda player api, I'm consulting the documentation and following everything I find to test, but nothing is working

<iframe 
    v-if="getCurrentLesson.mediaType === 'panda' && getCurrentLesson.is_liberated
    && videoEnded == false"
    allow="fullscreen"
    id="panda-player"
    ref="pandaPlayer"
    :src="source"
    :style="`${calcHeight}`"
    style="position: relative; border: 10px; width: 100%; max-width: 980px; min-height: 100%;"
  ></iframe>

methods:
    async calcPercent() {
      try {
        if (this.getCurrentLesson && this.getCurrentLesson.percent == 100)
        return;
        if(this.videoEnded === false){  
          window.pandascripttag = window.pandascripttag || [];
          await window.pandascripttag.push(() => {
            const player = new PandaPlayer("panda-player");
            setTimeout(() => {
              var current = player.getCurrentTime();
              var total = player.getDuration();
    
              current = parseInt(current, 10);
              total = parseInt(total, 10);
    
              var calc = (current / total) * 100;
              calc = parseInt(calc, 10);

              if((calc === 100 || (calc >= 99 && totalTime - time <= 1)) && this.getHasNextLesson && (this.getNextLesson.mediaType == 'youtube' || this.getNextLesson.mediaType == 'panda' || this.getNextLesson.mediaType == 'vimeo')){
                this.videoEnded = true
              }
  
              if (calc !== NaN) {
                this.$store.commit('setCurrentLesson', {
                  ...this.$store.getters.getCurrentLesson,
                  percent: calc
                })
              }
    
            }, 1000);
          });
        }
      } catch (e) {
        window.pandascripttag = [];
        document.getElementById("aleatorio").remove();
      }
    },

mounted:
try {
      if (this.getCurrentLesson.mediaType === 'panda') {
        window.pandascripttag = window.pandascripttag || [];
        window.pandascripttag.push(() => {
          this.player = new PandaPlayer("panda-player");
        });
        if (!document.getElementById("aleatorio")) {
          let pandaScript = document.createElement("script");
          pandaScript.setAttribute(
            "src",
            "https://player.pandavideo.com.br/api.js"
          );
          pandaScript.setAttribute("id", "aleatorio");
          document.head.appendChild(pandaScript);
        }
      }
    } catch (e) {
      window.pandascripttag = [];
      document.getElementById("aleatorio").remove();
      // console.log(e);
    }

In index.html:

<script async id="aleatorio" src="https://player.pandavideo.com.br/api.v2.js"></script>

I've already tried to play when the video is ready, but the browser blocks it. I tried some other things too, but they are more silly, the main ones that didn't work were these. I've been trying to resolve this issue with the service for almost a day.

window.pandascripttag.push(() => {
     this.player = new PandaPlayer("panda-player", {
         autoplay: true, 
      });

window.pandascripttag.push(() => {
     this.player = new PandaPlayer("panda-player", {
         playerConfigs: {
             autoplay: true,
         },
      });

I also tried adding "autoplay="true and "smartAutoplay=true" manually to the route, but it didn't work. The first even plays, but without audio, the second doesn't even play

Answer 1

You could use &autoplay=true at the end of your URL. If you don't want your video to start muted, you can use &autoplay=true&smartAutoplay=true.