Inline mobile video

At least IOS devices due to a policy adopted by Apple does not allow to play a html5 video in inline mode, restricting to play em only in fullscreen mode, but restrictions involve even events, autoplay. Find a solution to this problem could cause some headaches.


  • Enable autoplay
  • Play inline
  • Enable events while playing
  • Mantain all features of the video tag
  • Dig it enough to find something new

Autoplay … not yet.

Enabling the autoplay seemed to me an impossible challenge. I refused immediately the solution based on the poster attribute referencing a gif related to the video (standing one can generate it in an acceptable amount of time, once)….I tell You that it can be done, with no gif, but before that I must talk about the solution to the inline challenge, yes… We can do both!

Play inline

On my mobile (ios/android) no way I could let a video tag play without going in fullscreen mode. WTF could I do? Close to surrender came in my mind a popular demo directly from the html5 youth. I can clearly remember I was astonished by that, … now smells like a solution, so inspected the demo code and taaac: canvas.drawImage,… maybe this is enough to do the most of the work, thus hunt for some confirmation and even this time stackoverflow hugged me.

Basically it works like that:

  • the video tag plays hidden
  • a canvas element renders at the right framerate the frames that gets from the video, the size should be set paying the due attention to the resolution of the source
  • an audio tag runs too, there will be something to do about synchronization audio-video

let’s forget for a while the autoplay feature and we assume there is a acceptable solution, we`ll quickly discuss that soon.

So in the end we have to wrap the video tag within a div of the right size and add in it an audio tag and a canvas tag:

<!-- the original video tag -->

<video width="300" height="150">...</video> 

<!-- becomes -->

    <video width="300" height="150" style="display:hidden">...</video>
    <audio style="display:hidden">...</audio>

Now all is needed is a function __play_ that could look like:

function _play(){
    // in this scope we have a reference on video, audio (has same sources as video) and ctx (the canvas context)
    var lastTime =,
        size = {
            width : 480, // please do not
            height : 270 // hardcode numbers here!!!
        framesPerSecond = 25;

    audio.currentTime = 0;
    video.currentTime = 0;;

    ~ function r() {
        var time =,
            elapsed = (time - lastTime) / 1000,
            currentTime = (Math.round(parseFloat(video.currentTime) * 10000) / 10000),
            duration = (Math.round(parseFloat(video.duration) * 10000) / 10000);

        if (elapsed >= ((1000 / framesPerSecond) / 1000)) {
            video.currentTime = video.currentTime + elapsed;
            ctx.drawImage(video, 0, 0, size.width, size.height);
            lastTime = time;
        if (currentTime >= duration) {
            audio.currentTime = 0;
            console.log('ENDED: currentTime: ' + currentTime + ' duration: ' + video.duration);
            // the video is ended, go home
        animationFrame = requestAnimationFrame(r);

and we`re done.

Please consider to visit the following urls with Your mobile device:

Here there is a sample based on that for the preview only of the video


here the same solution is used in both the preview and playback.

back to the autoplay

Now the only problem related to the autoplay is that on some mobile browser only an event triggered by the user will allow You to actually call play on the video tag. At least one could always bind once a * user event and obtain this way a real user interaction and then invoke play.

events?…not only!

Binding events on the pseudo-video is super easy, as well as seek around the timeline with a gauge, mute/unmute and even apply simple filters (here again please use Your smartphone). Standing it is a canvas tag You can do really a lot on the top of it. The limits are given only by the canvas, and the lifetime of a frame.

something more

The canvas tag is with no doubt the most awesome graphic feature introduced by html5. Webkit when available allows to use some filters like blur, hue-rotate, saturate, _opacity, brightness, contrast and sepia in a really easy way. Here there is a simple example where I use these filters on a inline video (use your smartphone, or a cool browser); moreover it is even straightforward to have an adjustable timing gauge.

Enjoy the canvas!!!

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
Posted in javascript, mobile Tagged with: ,