Hi, I have a html5 page using <video> tag and running .webm files. It all works quite smoothly.

However, I would like to not run the video on mobile devices and instead replace it with the jpeg poster.

This is the setup now:

<video id="video" preload="auto" poster="video1.jpg" autoplay muted loop>

                    <source src="video1.webm" type="video/webm" />

<source src="video1.ogv" type="video/ogv" />

<source src="video1.mp4" type="video/mp4" />

Your browser does not support the video tag. I suggest you upgrade your browser.

</video>

Any ideas? Thanks!

possibly use JS to check the width/device and then auto pause/stop the video rather than playing it?

Similar solution to above...

Edited July 11, 201511 yr by junior

seems a bit mean for mobile users that maybe on a wifi network for example (i mean one they've already paid for or at work/hotel/airport... ) ?

Remove the autoplay attribute it is not reliable across all browsers.

Instead use the methods suggested by @@junior or @@NOCK . But use it to start the video if the device is not a mobile.

Here is the code for juniors approach (window size) :

window.addEventListener('load', function load(event) {
    var video = document.getElementById('video');
    if(window.innerWidth >640){
        video.play();
    }
});

Edited July 11, 201511 yr by Nillervision