YouTube Api - e-Lite - Politecnico di Torino

Transcript

API
Emiliano Castellina
Dipartimento di Automatica e Informatica
Politecnico di Torino
[email protected]
1
Introduzione
Tutto il materiale di questi lucidi è tratto da
http://code.google.com/intl/it-IT/apis/youtube/getting_started.html
 Tool
◦  Widgets
◦  Custom player
 Librerie
◦  Player API
◦  Data API
2
Widget
  Sono
componenti javascript che
permettono di visualizzare i contenuti di
YouTube all'interno delle pagine web
  2 Widget disponibili
◦  Video Bar
◦  Video Search Controll
3
Custom Player
  Permette
di
◦  personalizzare l'aspetto del player youtube
◦  Caricare filmati specifici
  Adatto
per non esperti di html e javascript
  Interfaccia per la creazione del player
http://www.youtube.com/custom_player
4
Player API
  Permette
di controllare tramite javascript
un player YouTube all'interno delle pagine
web
  Due tipi di player
◦  Embedded
◦  Chromeless
  Tre
metodi di interazione differente
◦  Javascript API
◦  Flash API
◦  IFrame API
5
JavaScript Player Api
  Richiede
che il browser abbia installato il
plugin Flash
  Consiglia di utilizzare SWFObject per
includere filmati SWF
◦  http://code.google.com/p/swfobject/
  La
pagina web deve implementare la
funzione JavaScript onYouTubePlayerReady
  La funzione viene richiamata quando il
player è stato correttamente caricato
6
Esempio 1
Visualizzare un player embedded nel div
con id=ytapiplayer
 Caricamento librerie jQuery e swfobject
<script type="text/javascript" src="lib/
swfobject.js">
</script>
<script type="text/javascript" src="lib/jquery/
jquery-1.4.2.js"></script>
 Al
caricamento della pagina
$(document).ready(function(){
7
Esempio 1
  Parametri
swfobject
  Creazione
del player
var VIDEOID="XSGBVzeBUbk";
var params = { allowScriptAccess: "always" };
var atts = { id:myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/e/"+VIDEOID+"?
enablejsapi=1&playerapiid=ytplayer",//url+player params
"ytapiplayer",//id div contenitore
"425",//larghezza
"356",//altezza
"8",//versione di flash minima
null,//url per installare flash
null, //parametri da passare a flash
params, //parametri da passare al server
atts //attributi del player
);
8
Esempio 2
Visualizzare un player chromeless nel div
con id=ytapiplayer
 Creazione del player
swfobject.embedSWF("http://www.youtube.com/
apiplayer?video_id="+VIDEOID
+"&enablejsapi=1&playerapiid=myytplayer&autoplay=1&v
ersion=3",
"ytapiplayer",
"425",
"356",
"8", null, null, params, atts);
})
9
Parametri del player 1/2
Aggiunti come parametri in get all'url SWF
Parametro
Descrizione
autohide
Indica se i controlli del player devono essere nascosti automaticamente:
• 0 controlli visibili
• 1 controlli nascosti dopo 2 secondi dall'avvio del video
• 2 (default) la progress bar viene nascosta durante il video
autoplay
• 
• 
0 (default) il video non parte in automatico
1 il video parte in automatico
border
• 
• 
0 (default) non mostra un bordo attorno al player
1 mostra un bordo attorno al player
color1,color2
• 
Valori esadecimale RGB
•  color1 colore principale bordo
•  color2 colore secondario bordo e background controlli
controls
• 
• 
0 non mostra i controlli del player
1(default) mostra i controlli del player
disablekb
• 
• 
0 (default) le scorciatoie da tastiera sono attive
1 disabilita le scorciatoie da tastiera
egm
• 
• 
0 (default) disabilita Enhanced Genie Menu
1 abilita Enhanced Genie Menu
enablejsapi
•  0 (default) disabilita Javascript API
•  1 abilita Javascript API
fs
•  0 (default) non visualizza bottone "A Tutto Schermo"
•  1 visualizza il bottone "A tutto schermo"
10
Parametri del player 2/2
Aggiunti come parametri in get all'url SWF
Parametro
Descrizione
hd
•  0 (defualt) non visualizza per default i filmati in formato hd
•  1 visualizza i filmati in formato hd
In_load_policy
• 
• 
1 (default) visualizza le annotazioni del filmato
3 non visualizza le annotazioni del filmato
loop
• 
• 
0 (default) esegue i/il video una volta sola
1 esegue in loop
playerapiid
• 
Stringa che specifica l'id del player
playlist
• 
Elenco di video ID separati dalla virgola e visualizzati in successione
rel
• 
• 
0 non visualizza i video correlati nella egm
1 (default) visualizza i video correlati nella egm
showinfo
• 
• 
0 non visualizza le informazioni sul video
1 (default) visualizza le informazioni sul video
showsearch
•  0 disabilita barra di ricerca quando il video è minimizzato
•  1 (default) abilita barra di ricerca quando il video è minimizzato
start
•  Int numero di secondi da dove il video deve partire
11
Esempio 3
Visualizzare un player embedded nel div
con id=video con le seguenti caratteristiche:
 Sia di qualità HD
 Carichi in loop i video con id
XSGBVzeBUbk e MGHwlExcaqU
 Nasconda automaticamente i controlli del
video
12
Esempio 3
swfobject.embedSWF(
"http://www.youtube.com/e/"+VIDEOID1+"?
playlist="+VIDEOID2+
"&enablejsapi=1&autohide=1&loop=1&egm=1&hd=1&version
=3",
"video",
"800",
"600",
"8",
null,
null,
params,
atts);
13
Funzioni Javascript Player Api
 
Riferimento al player
function onYouTubePlayerReady(playerId) {
ytplayer =
}
 
 
document.getElementById("myytplayer");
Caricamento, Accodamento filmati
◦ 
player.cueVideoById(videoId:String, startSeconds:Number, suggestedQuality:String):Void
◦ 
player.loadVideoById(videoId:String, startSeconds:Number, suggestedQuality:String):Void
◦ 
player.cueVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
◦ 
player.loadVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
Esecuzione filmati
◦ 
player.playVideo():Void
◦ 
player.pauseVideo():Void
◦ 
player.stopVideo():Void
◦ 
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void
◦ 
player.clearVideo():Void
14
  Cambiamento
del volume
◦  player.mute():Void
◦  player.unMute():Void
◦  player.isMuted():Boolean
◦  player.setVolume(volume:Number):Void
◦  player.getVolume():Number
  Dimensione
del player
◦  player.setSize(width:Number, height:Number):Void
  Stato
del filmato
◦  player.getVideoBytesLoaded():Number
◦  player.getVideoBytesTotal():Number
◦  player.getVideoStartBytes():Number
◦  player.getPlayerState():Number
◦  player.getCurrentTime():Number
15
  Qualità
del filmato
◦  player.getPlaybackQuality():String
◦  player.setPlaybackQuality(suggestedQuality:String):Void
◦  player.getAvailableQualityLevels():Array
 
 
Livelli di qualità
◦ 
Small
◦ 
Medium
◦ 
Large
◦ 
Hd720
◦ 
Hd1080
◦ 
Highres
Informazioni sul video
◦ 
player.getDuration():Number
◦ 
player.getVideoUrl():String
◦ 
player.getVideoEmbedCode():String
16
Eventi JavaScript Player Api
 
Aggiungere un listener di eventi
◦  player.addEventListener(event:String, listener:String):Void
 
Eventi
◦  onStateChange
  -1 unstarted
  0 ended
  1 playing
  2 paused
  3 buffering
  5 cued
◦  OnPlaybackQualityChange
◦  OnError
  2 richiesta con paremetro non valido
  100 video non trovato
  101 e 150 non è permesso mostrare il video in un player embedded
17
ESEMPIO 4
 
Creare una pagina html che
◦  visualizzi 2 player YouTube chromeless
◦  Abbia i seguenti bottoni
  Play 1: fa partire il filmato nel player1
  Play 2: fa partire il filmato nel player 2
  Stop 1: ferma il filmato del player 1
  Stop 2: ferma il filmato del player 2
  Play All: fa partire entrambi i filati
  Stop All: ferma entrambi i filamti
◦  Visualizzi nello span (id='v1') lo stato del video 1
18
iFrame API
  API
“sperimentali”, potrebbero cambiare!
  Utilizzano HTML 5
  Compatibili con browser che non
supportano Flash Player (iphone)
  E' necessario caricare lo script
<script type="text/javascript"
src="http://www.youtube.com/player_api”>
</script>
iFrame API
Esempio 5
Caricare un filmato nel div filmato
utilizzando le iFrame API
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
iFrame API
Esempio 6
 
Creare un filmato di dimensioni 1280x720, al caricamento
impostare l'audio su 50, richiamare la funzione
onPlayerStateChange quando cambia stato, nascondere i controlli
quando si avvia
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
playerVars: { 'autoplay': 1, 'controls': 0 },
videoId: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}
function onPlayerReady(event) {
event.target.setVolume(50);
event.target.playVideo();
}
Esempio 7
 
Creare una pagina web che
◦  Utilizzando le Api iFrame visualizzi 2 player YouTube
  videoid=MGHwlExcaqU
  videoid=JcxL43SircA
◦  Abbia i seguenti bottoni
  Play 1: fa partire il filmato nel player1
  Play 2: fa partire il filmato nel player 2
 
 
 
 
Stop 1: ferma il filmato del player 1
Stop 2: ferma il filmato del player 2
Play All: fa partire entrambi i filati
Stop All: ferma entrambi i filamti
Data API
 
Permettono di accedere alle informazioni
presenti in molti servizi offerti da google
◦  calendar
◦  YouTube
◦  immagini
◦  ricerche testuali
 
Servizi web restful che forniscono feed
◦  xml
◦  json
 
Documentazione
◦  http://code.google.com/intl/it-IT/apis/youtube/2.0/
developers_guide_protocol_audience.html
Feed Xml
<?xml version="1.0" encoding="UTF-8" ?>
<feed xmlns="http://www.w3.org/2005/Atom"
xmlns:openSearch="http://a9.com/-/spec/opensearchrss/1.0/"
xmlns:gd="http://schemas.google.com/g/2005"
xmlns:gCal="http://schemas.google.com/gCal/2005">
<id>...</id>
<updated>2006-11-12T21:25:30.000Z</updated>
<title type="text">Google Developer Events</title>
<subtitle type="text">The calendar contains information about upcoming
developer conferences at which Google will be speaking, along with
other developer-related events.</subtitle>
<link rel="http://schemas.google.com/g/2005#feed"
type="application/atom+xml" href="..." />
<link rel="self" type="application/atom+xml" href="..." />
<author>
<name>Google Developer Calendar</name>
<email>[email protected]</email>
</author>
Feed json
{
"version": "1.0",
"encoding": "UTF-8",
"feed": {
"xmlns": "http://www.w3.org/2005/Atom",
"xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
"xmlns$gd": "http://schemas.google.com/g/2005",
"xmlns$gCal": "http://schemas.google.com/gCal/2005",
"id": {"$t": "..."},
"updated": {"$t": "2006-11-12T21:25:30.000Z"},
"title": {
"type": "text",
"$t": "Google Developer Events"
},
"subtitle": {
"type": "text",
"$t": "The calendar contains information about upcoming developer
conferences at which Google will be speaking, along with other
developer-related events."
},
"link": [{
"rel": "...",
"type": "application/atom+xml",
"href": "..."
],
Json-C
{"apiVersion":"2.0",
"data":{
"updated":"2010-01-07T19:58:42.949Z",
"totalItems":800,
"startIndex":1,
"itemsPerPage":1 ,
{"id":"hYB0mn5zh2c",
"uploaded":"2007-06-05T22:07:03.000Z",
"updated":"2010-01-07T13:26:50.000Z",
"uploader":"GoogleDeveloperDay",
"category":"News",
"title":"Google Developers Day US - Maps API Introduction",
"description":"Google Maps API Introduction ...",
"tags":[
"GDD07","GDD07US","Maps"
],
"thumbnail":{
"default":"http://i.ytimg.com/vi/hYB0mn5zh2c/default.jpg",
"hqDefault":"http://i.ytimg.com/vi/hYB0mn5zh2c/hqdefault.jpg"
},
"player":{
"default":"http://www.youtube.com/watch?v\u003dhYB0mn5zh2c"
},
"content":{
"1":"rtsp://v5.cache3.c.youtube.com/CiILENy.../0/0/0/video.3gp",
"5":"http://www.youtube.com/v/hYB0mn5zh2c?f...",
"6":"rtsp://v1.cache1.c.youtube.com/CiILENy.../0/0/0/video.3gp"
},
"duration":2840,
"viewCount":220101,
"favoriteCount":201,
"commentCount":22,
"aspectRatio":"widescreen",
"rating":4.63,
"ratingCount":68,
°items":[
Query informazioni sui filmati
 
 
Test online
◦  http://code.google.com/intl/it-IT/apis/youtube/
articles/view_youtube_jsonc_responses.html
Richiesta GET http://gdata.youtube.com/feeds/api/
videos?v=2&alt=jsonc&callback=funzione&parametri
Parametri Standard Google Data API
Parametro
Descrizione
alt
Specifica il formato in cui i risultati vengono restutuiti: atom, rss,
json, json-in-script, jsonc
author
limita la ricerca ai contenuti caricati dall'autore indicato
callback
funzione javascript da richiamare quando i dati sono disponibili.
Con la funzione ajax di jquery non è necessario specificare
questo parametro, poiché viene passato automaticamente
fields
indica quali campi restituire (sperimentale)
fields-language
indica il linguaggio con cui sono specificati i fields
max-results
numero massimo di risultati da restituire
prettyprint
true indenta risposta, false non indenta risposta
start-index
indice del primo risultato restituito. Utilizzato in combinazione con
max-results per "scorrere" l'elenco dei risultati. Ad es. start-index
15 , max-results 10 restituisce gli elementi dal 15° al 25°
strict
true impedisce che la richiesta abbia successo se anche un solo
parametro non è corretto
v
versione del protocollo G-DATA. Attualmente v=2
Parametri YouTube Google Data API
Parametro
Descrizione
caption
 
category
restituisce i video di una determinata categoria
fmt
Formato sottotitoli
 sbv Subviewer-compatibile
 srt Subrip-compatibile
format
Formato del video:
  1 RSTP Stream H.263 per device mobili (176x144)
  5 url per embedded player SWF
  6 RTSP stream MPEG-4 per device mobili (176x144)
lang
Specifica la lingua dei sottotitoli
location
Restituisce i video che hanno una particolare
localizzazione geografica.
longitudine,latitudine
location-radius
definisce il raggio della circonferenza in cui selezionare i video in
base alla localizzazione. Il centro della circonferenza è il
parametro location. Ad es.
true restituisce i video che hanno sottotitoli
  false restituisce i video che non hanno sottotitoli
location=37.42307,-122.08427!&location-radius=100km
Parametri YouTube Google Data API
Parametro
Descrizione
lr
limita la ricerca ai video che hanno titolo e descrizione in una
determinata lingua
orderby
q
time
relevance (default)
 publisched ordine inverso di pubbilicazione
 viewCount numero di visualizzazioni discendenti
 rating valutazione in ordine descrescente
 
Specifica la query di ricerca all'interno dei metadati del video.
  q=%22Politecnico di Torino%22 ricerca una frase esatta
  q=Torino%7Milano
operatore or, Torino o Milano
  q=europa+-italia
operatore not, europa e non italia
today
 this_week
 this_month
 all_time
 
Esempio 8
  Visualizzare
un elenco dei titoli dei 10
filmati di YouTube con rating maggiore
che contengano come keyword "Politecnico
di Torino"
Informazioni sul singolo filmato
  Conoscendo
il video id di un filmato è
possibile accedere direttamente alle
informazioni sul video
◦  http://gdata.youtube.com/feeds/api/videos/
videoid?v=2
Esempio 9
  Effettuare
una chiamata json che dato l'id
di un video YouTube restituisca:
◦  il nome dell'autore
◦  il titolo
◦  la descrizione
◦  la durata
◦  l'immagine
Esempio 9
http://gdata.youtube.com/feeds/api/videos/DCKs3Igs6so?v=2&alt=jsonc&callback=funzione&prettyprint=true
 
{ "apiVersion": "2.0",
"data": {
"id": "DCKs3Igs6so", "uploaded": "2011-04-21T09:25:22.000Z", "updated": "2011-05-10T10:08:07.000Z", "uploader": "AnteprimaCinema", "category": "Film",
"title": "Harry Potter e i Doni della Morte Parte II - Trailer - Extra Video Clip 2",
"description": "Harry Potter e i Doni della Morte Parte II - Trailer - Extra Video Clip 2: diretto ancora una volta da David Yates, Harry Potter e i doni della morte parte II è l'ottavo e ultimo capitolo
della saga del mago più celebre della storia.\r\ncom/#!/anteprimacinema\r\n\r\nCheck out our playlist:\r\nhttp://www.youtube.com/AnteprimaCinema#grid/user/A09046110B7CA46A",
"tags": [
"Harry", "Potter", "and", "the", "Deathly", "Hallows", "Movie", "Trailer", "Film", "Daniel Radcliffe", "Emma Watson", "Rupert Grint", "David Yates",
"Fantasy",
"Sci-Fi",
"Adventure", "3D"
],
"thumbnail": {
"sqDefault": "http://i.ytimg.com/vi/DCKs3Igs6so/default.jpg",
"hqDefault": "http://i.ytimg.com/vi/DCKs3Igs6so/hqdefault.jpg"
},
"player": {
"default": "http://www.youtube.com/watch?v\u003dDCKs3Igs6so&feature\u003dyoutube_gdata_player", "mobile": "http://m.youtube.com/details?v\u003dDCKs3Igs6so"
},
"content": {
"5": "http://www.youtube.com/v/DCKs3Igs6so?f\u003dvideos&app\u003dyoutube_gdata",
"1": "rtsp://v1.cache7.c.youtube.com/CiILENy73wIaGQnK6iyI3KwiDBMYDSANFEgGUgZ2aWRlb3MM/0/0/0/video.3gp",
"6": "rtsp://v5.cache1.c.youtube.com/CiILENy73wIaGQnK6iyI3KwiDBMYESARFEgGUgZ2aWRlb3MM/0/0/0/video.3gp"
},
"duration": 292, "aspectRatio": "widescreen", "rating": 4.6666665, "likeCount": "11", "ratingCount": 12, "viewCount": 4594, "favoriteCount": 3, "commentCount": 0,
"accessControl": {
"comment": "allowed",
"embed": "allowed",
} }}
"commentVote": "allowed",
"videoRespond": "moderated", "rate": "allowed",
"list": "allowed", "syndicate": "allowed"
Feed Standard
• 
http://gdata.youtube.com/feeds/api/standardfeeds/nomeFeed?
parametri
Nome feed
Descrizioene
top_rated
video YouTube con valutazione maggiore
top_favorites
video preferiti da più utenti
most_viewed
video più visualizzati
most_shared
video più condivisi tra gli utenti
most_popular
Algoritmo che combina video favoriti, con
maggior valutazione e più visti
most_recent
Video più recenti
most_discussed
Video con più commenti
most_responded
Video con più risposte
recently_featured
Video che sono stati recentementi visualizzati
sulla home di YouTube
Feed per Nazione
• 
http://gdata.youtube.com/feeds/api/standardfeeds/regionID/
nomefeed?parametri
Esempio 10
  Visualizzare
un elenco con i titoli, gli autori
e la durata dei 20 video più popolari in
Italia
  http://gdata.youtube.com/feeds/api/
standardfeeds/IT/most_popular?
v=2&max-results=20

YouTube Api - e-Lite - Politecnico di Torino

Transcript

Documenti analoghi

Gestire le situazioni critiche durante una riunione

Programmi per convertire e vedere video

lg supersign`s

Dizionario inglese

ESPRESS CCHIALI De Luxe