Video not playing in mobile device

[Osman-Rafi]

Hi, Everything is working fine in desktop, but in mobile in only shows the poster without playing the video. My code snippet

 <video-background
            :src="require('../../../../../public/media/video/login-bg.mp4')"
            style="height: 100vh"
            :poster="require('../../../../../public/img/login-bg-img.png')"
          >
            //some code
  </video-background>

Vue - 2.6.11 vue-responsive-video-background-player: ^1.3.1

[anluh]

The same...

[pmochine]

@Osman-Rafi @anluh could you please create a GitHub example that I can download? And which browser do you use for mobile?

[anluh]

I'm using it with ionic inner browser (chrome). Testing on ios device.

[yiyasha15]

Were you able to fix this? @Osman-Rafi @anluh ?

[anluh]

No

[robairhome]

I had this same issue. For me at least it wasn't a problem with the library as I replicated the same thing using html video.

This happened when I tried to put large video as the background. It worked fine on desktop, was stuttery on Firefox Mobile and wouldn't play at all on Chrome Mobile (it would just stay as the placeholder image). Its extra confusing as the video works fine in devtools simulating a mobile screen.

The solution was to just re-render the video at a lower resolution. I suspect Chrome has some feature on mobile that automatically won't play videos which will slow down the browser too much.

This was the video that wouldn't play https://www.pexels.com/video/couple-walking-on-a-beach-filmed-with-a-drone-857268/