Lime. Creative Blog by Peeke Kuepers.

Heads up: webdeveloping for mobile

When testing my site in the mobile IE10 browser for WP7.5, I noticed some of my javaScript (read, jQuery) wasn’t working. The code stopped executing at seemingly random moments.

Easy fix: remove all console.log’s. Somehow IE10 couldn’t handle those. I’m not sure whether it’s the case for other mobile browsers too.

HTML5 Video: How to make it work

Or rather, how I made it work. This blog post is a response to the lack of a comprehensive overview of the do’s and dont’s of HTML5 video. Also explains how to make the video autoplay across all devices (also the default Android Browser)

First things first, video codec and container. To make sure your video’s work across all devices and browsers, you need multiple container formats and encodings. These are the ones available:

1. .mp4/.m4v (h.264 codec)
2. .webm (VP8 codec)
3. .ogv (theora codec)

Specifying a (mime)type and the used codecs is good practice, though according to an article on broken-links.com it breaks the playback on some android devices. Omitting a mimetype on the first source tag can fix this.

Since HTML5 is new (well, not really) some hosts don’t recognize the files that are supported by the browser. To fix this, you can add the mimetypes manually to a .htacces file or directly in a Virtual Host file (). To do this, you use the AddType command:

AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm

To make the videos autoplay (if you want ;) ) we use javascript:

var video = document.getElementById(‘video’);
video.load();
setTimeout(function() { video.play(); }, 500);

Just call the load() and play() functions of the video element. I’m not ready sure wether the setTimeout is needed, but it seemed to make the video run better on some devices.

At this point, I still had trouble getting the video to play in the default Android Browser for Android. To fix this, I detect wether the user uses the default Android Browser and when they do I set the src attribute of the video tag to the value of the first source tag like this:

var video = document.getElementById(‘video’); 
video.src = video.firstElementChild.src;

This seemed to fix the issue. Probably, the default Android Browser has some trouble with the load() function, though I’m not sure about that.

I’ve been able to test this solution on the following devices:

• iPhone4S (iOs)
• iPad2 (iOs)
• Asus transformer (android 4.0)
• Galaxy S+ (android 2.2, have to check this one)
• Nokia Lumia (WP7.5)

Comments are welcome! Comment here, or leave a tweet @peeke91.