Demo
jQuery plug-in source at BitBucket
Examples of how to use the plug-in.
// global configuration options
$.own3d.liveurl = 'http://ingol.nl/own3d/live.php';
$.own3d.channelurl = 'http://ingol.nl/own3d/channel.php';
// A single stream
$('#own3d-cowclan').own3d({liveid:'1213', title:'COWCLAN'});
// A single stream with HD
$('#own3d-rebootgpf').own3d({liveid:'1208', title:'REBOOTGPF', hd:true});
// A single stream without title
$('#own3d-1208').own3d({liveid:'1208', hd:true, embed:true, channelid: 'orlissenberg'});
// A single channel, live streams only
$('#channel').own3d({channelid:'clgame', hd:true, embed:true});
// A single channel, live and offline streams
$('#channel-all').own3d({channelid:'clgame', hd:true, showall:true});
The jQuery OWN3D Plug-in Code.
(function($){
$.own3d = {
liveurl : 'live.php',
channelurl : 'channel.php'
};
$.fn.own3d = function(options) {
return this.each(function(){
var self = $(this);
self.data('liveid', options.liveid);
if (options && options.liveid) {
$.ajax({
type: "GET",
async: true,
data: {live_id:options.liveid},
url: $.own3d.liveurl,
dataType: "jsonp",
success: function(data){
var title = (options.title) ? options.title : 'OWN3D CHANNEL ['+options.liveid+']';
var liveclass = (options.hd) ? 'own3d-live-hd' : 'own3d-live';
self.empty();
self.addClass('own3d');
var link = $('<a/>')
.attr('href','http://www.own3d.tv/live/'+options.liveid)
.attr('target','_blank');
if (data.isLive && data.isLive == 'true') {
link.html(title+' - LIVE (viewers: '+data.liveViewers+' - duration: '+Math.round(parseInt(data.liveDuration) / 60)+' minutes)');
if ((options.showthumbnail || options.embed) && options.channelid) {
$.ajax({
type: "GET",
async: true,
data: {channel_id : options.channelid, stream_guid : 'http://www.own3d.tv/live/'+options.liveid},
url: $.own3d.channelurl,
dataType: "jsonp",
success: function(data){
if (options.showthumbnail && data.thumbnail) {
var table = $('<table/>');
var status = $('<td/>').append($('<div/>').addClass(liveclass).append(link));
table.append($('<tr/>').append(status));
var thumbnail = $('<td/>').append($('<img/>').attr('src',data.thumbnail));
table.append($('<tr/>').append(thumbnail));
self.append(table);
} else if (options.embed && data.title) {
var e = '<iframe height="360" width="640" frameborder="0" src="http://www.own3d.tv/liveembed/'+self.data('liveid')+'"></iframe>';
var table = $('<table/>');
var status = $('<td/>').append($('<div/>').addClass(liveclass).append(link));
table.append($('<tr/>').append(status));
var embeddedplayer = $('<td/>').html(e);
table.append($('<tr/>').append(embeddedplayer));
self.append(table);
};
},
error: function(XMLHttpRequest, textStatus, errorThrown){
// console.debug(errorThrown);
}
});
} else {
self.append(link);
self.addClass(liveclass);
}
} else {
link.html(title+' - OFFLINE');
self.removeClass(liveclass);
self.append(link);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown){
// console.debug(errorThrown);
}
});
} else if (options && options.channelid) {
var ajaxdata = {
channel_id : options.channelid
};
if (options.showall) { ajaxdata.showall = 1; };
$.ajax({
type: "GET",
async: true,
data: ajaxdata,
url: $.own3d.channelurl,
dataType: "jsonp",
success: function(data){
self.empty();
var embedded = true;
for(var i=0;i<data.streams.length;i++) {
var stream = data.streams[i];
var plugindata = {
liveid : stream.liveid,
title : stream.title,
channelid : options.channelid,
// embed the first, thumbnail the rest
showthumbnail : (options.showthumbnail) || (!(options.showthumbnail) && options.embed && !embedded) ? true : false,
embed : (options.embed) ? true && embedded : false
};
// prevent opening multiple embedded players
embedded = false;
self.append($('<div/>').own3d(plugindata));
}
},
error: function(XMLHttpRequest, textStatus, errorThrown){
// console.debug(errorThrown);
}
});
}
});
}
})(jQuery)
A simple PHP – Zend Framework script to enable a cross domain request to the OWN3D API (the full project contains two, one for the live status and one for the channel information).
<?php
// Define path to application directory
define('APPLICATION_PATH', realpath(dirname(__FILE__)));
// Ensure library/ is on include_path
set_include_path(implode(PATH_SEPARATOR, array(
realpath(APPLICATION_PATH . '/../../apps/library'),
get_include_path(),
)));
$liveid = isset($_GET['live_id']) ? intval($_GET['live_id']) : 0;
require_once 'Zend/Http/Client.php';
$client = new Zend_Http_Client('http://api.own3d.tv/liveCheck.php?live_id='.$liveid, array('adapter' => 'Zend_Http_Client_Adapter_Socket'));
$xmlstr = $client->request()->getBody();
$xml = new SimpleXMLElement($xmlstr);
require_once 'Zend/Json/Encoder.php';
header('Content-Type: application/json');
// JSONP
if (isset($_GET['callback'])) {
echo $_GET['callback'].'('. Zend_Json_Encoder::encode(array(
'isLive'=>(string)$xml->liveEvent->isLive,
'liveViewers'=>(string)$xml->liveEvent->liveViewers,
'liveDuration'=>(string)$xml->liveEvent->liveDuration,
)).')';
}
// JSON
else {
echo Zend_Json_Encoder::encode(array(
'isLive'=>(string)$xml->liveEvent->isLive,
'liveViewers'=>(string)$xml->liveEvent->liveViewers,
'liveDuration'=>(string)$xml->liveEvent->liveDuration,
));
}