Main Menu

browser lang:en

Users Area

today cache size is:222615

rss 2.0 for all sections

Portfolio

Some of my projects:
CTIBA
MA-NO Web Agency
BluPool
L'Pratone
Travel in Hotel
Yacht Elements
AbruzzoWeb
Il Mastino
CSI Teramo
Innovazione S.p.a.

Commenti

ciao jackall
17/07/2010 by marco
aiuto
17/07/2010 by marco
RE: Domanda
08/05/2010 by holyguard
Domanda
05/05/2010 by pryons
Ringraziamento
15/04/2010 by Yuriy, webmaster
edu
12/04/2010 by eduala@libero.it
eing ?
16/03/2010 by Andreu
zend
16/03/2010 by holy

RAPIDQ

Rapid-Q:The lost files
My old library where i have collected all the rapidq scripts and italian help

Today my pagerank is:

Inserire un canale YouTube sul proprio sito con Json

Post date:25/01/2009 - Posted by

admin

Le nuove YouTube Data API ci permettono di ottenere dati JSON riguardanti il nostro canale (o un'altro canale) e integrarli nel nostro sito tramite Javascript. Grazie ad esse infatti possiamo scaricare i una serie di dati come playlists, video preferiti o anche fare ricerche cross-domain.

Tutto fatto in javascript, senza l'ausilio di frameworks AJAX o diavolerie del genere, puro e semplice HTML.

Esempio (in questo caso ho richiamato i dati del canale video dell'amico CLAUS):

Listato:



<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>

<script type="text/javascript">
  
function loadVideo(playerUrl, autoplay) {
  swfobject.embedSWF(
      playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
      (autoplay?1:0), 'player', '600', '286', '8.0.0', false,
      false, {allowfullscreen: 'true'});
}

function showMyVideos(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = [''];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
    var playerUrl = entries[i].media$group.media$content[0].url;
	var playerDuration = entries[i].media$group.yt$duration.seconds;
	var playerDescription = entries[i].media$group.media$description.$t.substr(0, 80);
	//var playerStats = entries[i].yt$statistics.viewCount;
	//var playerStats = 'aaa';
    html.push('<div onclick="loadVideo(\'', playerUrl, '\', true)"><div class="ContenidoHolderBoxInside_video"><div class="ContenidoBoxInside_video_130"><img src="', thumbnailUrl, '" width="130" height="97"/></div><div class="ContenidoBoxInside_right_video">','<strong>', title,'</strong>',  '<br />Duration: ',playerDuration,'<br /> Description: ',playerDescription,'<br /> </div></div></div><br>');

  }
  html.push('');
  document.getElementById('videos').innerHTML = html.join('');
  if (entries.length > 0) {
    loadVideo(entries[0].media$group.media$content[0].url, false);
  }
}


</script>

In questo caso faremo in modo che la lista di video sia cliccabile, e che una volta selezionato un video esso apparirà nel frame principale.

Questo è il codice HTML, DIV in cui andremo ad iniettare i dati JSON.



      <div id="playerContainer" style="width: 320px; height: 200px;">

        <object id="player">
        </object>
      </div>

<div id="videos"></div>

Nella pratica, per consumare il JSON esterno, simulo che questo è un javascript esterno. I Javascript esterni non risentono delle restrizioni applicate dai browser per il cross domain. Poi chiamo la funzione che include i dati nello script con il nome che specifico nella callback.



<script type="text/javascript" src="http://gdata.youtube.com/feeds/users/micrositesmelia/uploads?alt=json-in-script&format=5&max-results=30&callback=showMyVideos">

</script>

Rating:

51.0

9 votes

1 2 3 4 5

Commenti

help by holyguard

01/03/2009

Guarda questo esempio qui

http://www.holyguard.net/test/test_json_youtube.php

by diego

28/02/2009

scusa ma i codici:
<div id="playerContainer" style="width: 320px; height: 200px;">

<object id="player">
</object>
</div>

<div id="videos"></div>

e....

<script type="text/javascript" src="http://gdata.youtube.com/feeds/users/micrositesmelia/uploads?alt=json-in-script&format=5&max-results=30&callback=showMyVideos">

</script>

dove vanno inseriti?