Posts tagged jquery

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,
    ));
}