Is not auto playing

[neiromendez]

I implemented this component to my project in local works fine but in production is not working, the first load is no autoplay just appear the poster.

I'm listening this events without success:

    mounted() {
    document.addEventListener("error", this.vidError);
    document.addEventListener("ready", this.vidReady);
    document.addEventListener("loading", this.vidReady);
    document.addEventListener("ended", this.vidReady);
  }
  vidError(e: any): void {
    console.log(e);
    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
    // @ts-ignore
    this.$refs.videobackground.player.play();
  }
  vidReady(e: any):void{
    console.log(e);
    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
    // @ts-ignore
    this.$refs.videobackground.player.play();
  }

in the component too

<video-background
      ref="videobackground"
      :src="require('@/assets/vid.mp4')"
      :poster="image('logo.svg')"
      type="video/mp4"
      :style="
        $vuetify.breakpoint.xlOnly
          ? 'height: 100vh'
          : $vuetify.breakpoint.lgOnly
          ? 'height: 99vh'
          : $vuetify.breakpoint.mdOnly
          ? 'height: 80vh'
          : $vuetify.breakpoint.smAndDown
          ? 'height: 44vh'
          : ''
      "
      @error="vidError"
      @ready="vidReady"
    >

If anyone could help me to solve it, Thanks for the effort

[pmochine]

@neiromendez First thing that I notice. Why do are using document event listeners? Like: document.addEventListener("error", this.vidError); You cannot listen to any since they are fired via the Vue component.

Second: You don't need to set the type="video/mp4". I won't change anything.

Another thing: Could you force to play the video like this.$refs.videobackground.player.play();?

My guess is that there is a problem for finding the source of the video. That's why it's not playing at all.

[neiromendez]

@neiromendez First thing that I notice. Why do are using document event listeners? Like: document.addEventListener("error", this.vidError); You cannot listen to any since they are fired via the Vue component.

Second: You don't need to set the type="video/mp4". I won't change anything.

Another thing: Could you force to play the video like this.$refs.videobackground.player.play();?

My guess is that there is a problem for finding the source of the video. That's why it's not playing at all.

I @pmochine thanks for your reply, It is very strange because locally it works as expected. addEventListener from mounted. also, I put the this.$refs.videobackground.player.play(); but is not solving the problem

[pmochine]

@neiromendez
My guess is that it cannot find the path of the video in production mode. You can easily check it via Chrome by inspecting the path of the video and check if you can manually play it.

[neiromendez]

@neiromendez
My guess is that it cannot find the path of the video in production mode. You can easily check it via Chrome by inspecting the path of the video and check if you can manually play it.

https://mos-landing.firebaseapp.com/ you can take a look, sometimes the video start and others not

[pmochine]

@neiromendez getting closer. Indeed sometimes the video starts, sometimes not. When it's not playing I get the error:

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22

Not sure where it is coming from.

[neiromendez]

@neiromendez getting closer. Indeed sometimes the video starts, sometimes not. When it's not playing I get the error:

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22

Not sure where it is coming from.

yeap, I don't know why that's happening, I have been looking at the component but I can't find why that is happening

[pmochine]

In the mean time you could use something like that:

<video-background
      ref="videobackground"
      :src="require('@/assets/vid.mp4')"
      :autoplay="false"
      ...
>

and then play the video after one second with

mounted(){
    window.setTimeout(() => this.$refs.videobackground.player.play(), 1000);
}

At least it should work with that.

[neiromendez]

In the mean time you could use something like that:

<video-background
      ref="videobackground"
      :src="require('@/assets/vid.mp4')"
      :autoplay="false"
      ...
>

and then play the video after one second with

mounted(){
    window.setTimeout(() => this.$refs.videobackground.player.play(), 1000);
}

At least it should work with that.

In the mean time you could use something like that:

<video-background
      ref="videobackground"
      :src="require('@/assets/vid.mp4')"
      :autoplay="false"
      ...
>

and then play the video after one second with

mounted(){
    window.setTimeout(() => this.$refs.videobackground.player.play(), 1000);
}

At least it should work with that.

Unfortunately, it doesn't work.
But thx for your help

[pmochine]

@neiromendez
I tried your version as a simple production page. But I cannot reproduce the error.

Here is one example: It works perfectly fine

<template>
  <div id="app">
    <video-background 
      ref="videobackground"
      src="https://mos-landing.firebaseapp.com/media/vid.da329944.mp4"
      style="max-height: 400px; height: 100vh;"
      @error="vidError"
      @ready="vidReady"
  >
      <h1 style="color: white;">Hello welcome!</h1>
  </video-background>
  </div>
</template>

<script>

 import VideoBackground from 'vue-responsive-video-background-player'
export default {
  name: 'App',
  components: {
    VideoBackground
  },
  mounted() {
   // Not sure why you have it here :D 
    document.addEventListener("error", this.vidError);
    document.addEventListener("ready", this.vidReady);
    document.addEventListener("loading", this.vidReady);
    document.addEventListener("ended", this.vidReady);
  },
  methods: {
    vidError() {
      console.log('vidError');
      this.$refs.videobackground.player.play();
    },
    vidReady(){
     console.log('vidReady');
      this.$refs.videobackground.player.play();
    }
  }  
}
</script>

Could you do me the favor and create the "simplest" version of the problem, so I can check it out.