CODEWITHSUNDEEP
androidhtmlipadvideohtml5-video
squid
squid

Reputation: 65

html5 video not working on tablet

I have a website with a big video in the background and I used HTML5 video for it. It does all I want on desktops, I can't make it work on tablets though (don't need it on mobiles) - instead of a video I see a black background only.

Code below:

<div id="video-container">
<video autoplay loop class="fillWidth">
<source src="http://link/vid.mp4" type="video/mp4"/>
<source src="http://link/vid.ogv" type="video/ogg"/>
<source src="http://link/vid.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

Is it caused by the autoplay option? If so, is there any workaround? Thanks, S.

Upvotes: 0

Views: 1933

Answers (1)

brianchirls
brianchirls

Reputation: 7853

On most mobile browsers (including tablets - definitely iPad), autoplay will not work. The browser won't download any of the video file, not the first frame or even the metadata, until there's some kind of user interaction event - typically either a click or a touch.

The first thing you can do to alleviate the situation is to set a poster attribute on the video element, which is the URL to a poster image. That image should be visible right away in place of your video. If you want to go the extra mile, you can set a background color on the body so the user will see that while they're waiting for the poster image to load.

Next, you can add a touch or click event listener anywhere you want in the document that starts the video playing as soon as the user interacts with your web page.

Upvotes: 2

Related Questions