HTML5 video and mobile

Question

I'm using this code for HTML5 video (for the background of a design):

<video autoplay loop>
    <source src="video/hello.webm" type='video/webm;codecs="vp8, vorbis"' />
    <source src="video/hello.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
</video>

This doesn't seem to work on mobile but that's totally fine, but what I want to know is will the video still load (even though it doesn't show) and use bandwidth on the device? In this case the video is 3mb, and if it's not actually loading on mobile then that's awesome. But if it is, what can I do about it?

Thanks.

Answer 1

Nope, the video will be not downloaded, if the browser does not support the play file type.

It is also a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded.

However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video loads).

You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element.

A side note about MPEG-4/H.264: The Android 2.3 browser currently requires specific handling to play videos.

Firefox browser will include support on some platforms in upcoming versions.

Firefox supports H.264 on Windows 7 and later since version 21. Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed. Partial support for Firefox refers to the lack of support in OSX & some Linux platforms, for Android Firefox it refers to the inability of hardware acceleration.

Answer 2

Try your example with a less restrictive type attribute and test if it then works on mobile devices. E.g. type="video/mp4". The native Android browser and the iOS Safari should play mp4 without problems.

If a browser doesn't understand a media type it also does not download anything. That would be insane, right? Just make sure that you include all the type required by the different browsers.

please do also refer to the compatibility table at MDN.