CODEWITHSUNDEEP
htmlvideo
Partteam
Partteam

Reputation: 145

HTML Video not working on mobile

I have a full width background video with autoplay and loop propreties and works really good on desktop but in mobile video dont show and dont start... just show a black screen

I need to fix this for mobile, if that's not possible to put video working on mobile I can put a background image on mobile 

<video autoplay loop muted autobuffer preload="auto" poster="poster.png" class="background-video">
        <source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'>
        <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
    </video>

Upvotes: 11

Views: 62386

Answers (4)

JaredMcAteer
JaredMcAteer

Reputation: 22545

If you've added playsinline to your video tag and the file is still not playing. If you download the file to your phone and it won't play with the default video viewer then you might have something wrong in the encoding.

In my case it was the pix_fmt

ffprobe -i file.webm
...
  Stream #0:0(eng): Video: vp9 (Profile 2), yuv420p12le(tv), 640x640, SAR 1:1 DAR 1:1, 30 fps, 30 tbr, 1k tbn, 1k tbc (default)

yuv420p12le(tv) is the pix_fmt and it will not play on my mobile device I re-encoded it using yuv420p and the video now will play.

ffmpeg -i file.webm -c:a copy -pix_fmt yuv420p file2.webm

ffprobe -i file2.webm
...
  Stream #0:0(eng): Video: vp9 (Profile 0), yuv420p(tv, progressive), 640x640, SAR 1:1 DAR 1:1, 30 fps, 30 tbr, 1k tbn, 1k tbc (default)

Upvotes: 0

Tom
Tom

Reputation: 423

adding playsinline attribute to the video tag fixed the issue for me.

according to a good google search, on mobile the Video element falls back to a poster... be mind full of video size so they user will not encore massive data usage charges and to maintain a responsive site.

<video playsinline autoplay loop muted id="myVideo"></video>

Upvotes: 28

kawerewagaba
kawerewagaba

Reputation: 1367

Turns out the video actually plays - but it's weird how that happens! First of all, I'm testing on Android 5.1.1. Alright, here's the situation: On load, the video doesn't play but instead displays the fallback poster image. I had given up on the video thing, but when I was navigating the site and at some point decided I wanted to go back Home, I navigated to the Homepage and the video was playing! I tried refreshing the page, and the video didn't play on load but instead got the poster image! What could be happening? I figured just clicking the phone's back button to navigate to the homepage still didn't play the video, but explicitly clicking the home link did! So I gave it another shot - refreshed the page, video didn't play, clicked the home link and the video started playing on load! This is the structure of my home link: <a href="./"><img src="path-to-logo" /></a> Can somebody explain what could be happening?

Upvotes: 1

Mick
Mick

Reputation: 25491

The Autoplay tag on mobile is generally not supported - this is to avoid users incurring data transfer costs as video files are large and can eat into data limits.

The poster tag should work fine, however, as I think you noted in your last comment.

Upvotes: 4

Related Questions