7

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>
Partteam
  • 105
  • 1
  • 1
  • 8
  • 1
    What mobile? O.S.? Version? Browser? Errors in console? – Marcos Pérez Gude Aug 11 '16 at 10:36
  • Well, doesnt work on Android.. didnt tested in iOS ... Browser Google Chrome How can i see console in mobile? @MarcosPérezGude – Partteam Aug 11 '16 at 10:37
  • 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" – Marcos Pérez Gude Aug 11 '16 at 10:40
  • and i will be able to see if there is any error on console? – Partteam Aug 11 '16 at 10:43
  • 1
    Maybe You can try https://www.jwplayer.com/products/jwplayer/mobile-video/ –  Aug 11 '16 at 10:44
  • Hum i will see then .. – Partteam Aug 11 '16 at 10:45
  • @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 – Marcos Pérez Gude Aug 11 '16 at 10:48
  • 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 – Marcos Pérez Gude Aug 11 '16 at 10:48
  • So, might not be a problem with the player or the video ? I dont have a cable usb here :/ – Partteam Aug 11 '16 at 10:52
  • Well the jwplayer seems to work, but how can i set iframe to autoplay?@MarcosPérezGude – Partteam Aug 11 '16 at 10:57
  • the tag "poster" worked on mobile... so the video it's not available on mobile but at least has a background img – Partteam Aug 11 '16 at 13:38

3 Answers3

20

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>
Tom
  • 343
  • 2
  • 7
4

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.

Mick
  • 24,231
  • 1
  • 54
  • 120
1

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?

kawerewagaba
  • 1,107
  • 2
  • 15
  • 21
  • 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. – Ramesh Feb 25 '19 at 17:22