This is what developing web-based JTV Apps for Android looks like
Sad day. Turns out that the Justin.tv Javascript API doesn’t work for Android devices. Maybe their Live Video SWF aPI works with Android, but Flash is the culprit and reason I wanted to work with the API in the first place. It would be really awesome if JTV had more choices for how you use their API—including a non-flash based way to stream video so developers could design applications for most new mobile devices.
This isn’t a complaint; I think services like JTV opening up their platform for developers will lead to some great things in the next few years. I’ll bet that the first big player to build out a strong platform that is cross-device compatible is going to explode in popularity.
Anyways, I didn’t get past just building a simple test, so not much time wasted here. I’m not happy with the controls on the flash player for Justin TV when watching on my Motorola Xoom, and wanted to build a more reliable interface for myself and other Android users. The flash controls are clunky, slow to respond, and I can never seem to hit the right button (often times stopping my video, and forcing me to redirect to a justin.tv channel page when I’m watching from a pop-out or embed).
I’m sort of a beginner when it comes to building out these sorts of things, and there weren’t any good examples for getting a basic stream running in JTV’s docs. If you’re new to this sort of stuff, here’s the code I used to build out a basic player:
HTML:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JTV for Android</title> <link href="stylesheets/reset.css" rel="stylesheet" type="text/css"> <link href="stylesheets/common.css" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://www-cdn.justin.tv/javascripts/jtv_api.js"></script> <script src="javascripts/app.js"></script> </head> <body> <div id="player"></div> </body> </html>
Javascript (app.js):
$(document).ready(function() {
var gid = document.getElementById;
var options = {
channel:'theleggett',
consumer_key:'e6ql03EOgx31mZgQfopQ',
auto_play:true,
custom:true,
width:480,
height:360
};
var player = jtv_api.new_player('player', options);
});
