So Xbox 360 has a browser, IE9 to be exact. I found this an excellent opportunity to create a small website to stream cartoons from the Icelandic national broadcasting station for my son on the console. That way I could again gain access to my main PC ;)

I wanted to be able to have the browser automatically start playing videos when the page was requested and that the videos should automatically advance to the next available video when possible.

IE9 is a little difficult to deal with as many of the html5 video features never really changed from the public beta and are still surprisingly inconsistent.

See Demo

Specifying the video element

<!-- the height and width must be specified in -->
<!-- CSS otherwise ie9 doesn't render properly -->
<!-- width="" values are always interpreted as pixels -->
<video id="video" 
       autoplay="autoplay" 
       controls="controls" 
       onended="loadNext()" 
       onloadeddata="startPlay()" 
       style='height:100%; width:100%;'>
        Your browser does not support the <code>video</code> element. 
</video>

1. The size of the video must be specified in CSS. If you use the width="" and height="" attributes then those values will always be interpreted as pixels (yes, even though you specify "100%")
2. The attributes autoplay, controls, loop must all be specified on the form attribute="attribute".
3. Autoplay does simply not work. I left it in there for other browser types.
4. The events canplay and canplaythrough are not raised so you have to rely on the loadeddata event to initiate the play action.
5. After modifying the src attribute on the video element you must call the load method.

The complete list of events can be found on MSDN (warning the documentation is wrong in a few places, e.g. canplay and other events).

The video element script

There is no native way to specify a playlist but fret not the logic is pretty simple. This is all written in Javascript, I must warn you that the script uses global variables.

var videos = ["video01.mp4","awesome_ducklings.mp4","pigmy_elephants.mp4"];

videoIdx = 0; 
videoPlayer = document.getElementById("video");
videoPlayer.autoplay=true;

function loadNext()
{
    videoIdx = videoIdx % videos.length;
    var videoSrc = videos[videoIdx];
    videoIdx += 1;

    if( videoSrc != "" )
    {       
        videoPlayer.src = videoSrc;
        // On IE9 after changing 'src' you must 
        // call load() before calling play()
        videoPlayer.load();
    }
}

function startPlay()
{   
    videoPlayer.play();
}

I separate the load and play functions to be able to wait for the browser to indicate to me when it has loaded the video before triggering play. If you trigger the play() function before the loadeddata even is raised then the video will not start playing.

Autorun

To have the video start playing immediately after the page is loaded specify the following javascript near the bottom of your page.

document.addEventListener("DOMContentLoaded", function(event) { 
    loadNext(); // Start playback when the DOM is ready
});

User friendly play/pause

The default play controls in IE9 are a little bit small and the player does not natively support clicking on the main video window to play/pause the video. The following script handles this for us.

// Listen for clicks on the main video player window to play/pause
videoPlayer.addEventListener("click", function () { 
    if (videoPlayer.paused) {
        videoPlayer.play();
    } else {
        videoPlayer.pause();           
    }
}, false);

Skipping to the next video

To have the player skip to the next video in the playlist you can simply call the loadNext() function like so

<a href="javascript:loadNext()">Play Next</a>

Conclusion

That's it, with this code you should have no trouble playing your videos on both the IE explorer on Xbox and the native browser on the Playstation.

See this article from wpxbox.com for more tips and tricks for the IE browser on Xbox.

If you want to see this code in action you can check out the site I built (warning in Icelandic)

Launch

• ← Newer
• Older →