HTML Video not working on mobile

Question

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>

Leopard

What mobile? O.S.? Version? Browser? Errors in console? – Schaper

Well, doesnt work on Android.. didnt tested in iOS ... Browser Google Chrome How can i see console in mobile? @MarcosPérezGude – Leopard

If you use chrome+android and you connect your device to USB you can debug through chrome dev tools. Search about "how to debug android webapps" – Schaper

and i will be able to see if there is any error on console? – Leopard

Maybe You can try jwplayer.com/products/jwplayer/mobile-video – Altorelievo

Hum i will see then .. – Leopard

@Paulosá you will be able to use all chrome developer tools (inspector, console, network, debugger...) and with this tool, you can identify exactly the problem. You can see in network if the video resource is loaded, if the console throws errors, inspect the element to see if it's in the right position.... etc etc etc – Schaper

HTML5 video works in desktop and mobile with no problems in native mode, you don't need plugins like jwplayer that was useful but right now is unneccesary – Schaper

So, might not be a problem with the player or the video ? I dont have a cable usb here :/ – Leopard

Well the jwplayer seems to work, but how can i set iframe to autoplay?@MarcosPérezGude – Leopard

the tag "poster" worked on mobile... so the video it's not available on mobile but at least has a background img – Leopard

Answer 1

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.

Bordiuk

Answer 2

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>

Lavernelaverock

Answer 3

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?

Tessler

That's the behavior of the html video element. It won't trigger autoplay till the user interact with the website. In the initial load in the mobile browsers it's still not considered as user interacted with the website. When you load it 2nd time, it counts the interaction and start playing. – Serajevo

Answer 4

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)

Misology