Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Integrare contenuti multimediali in un feed

Distribuire video tramite RSS: il caso di ICTv
Distribuire video tramite RSS: il caso di ICTv
Link copiato negli appunti

È oramai lontano il periodo in cui il web era composto solo da paginette HTML e qualche immagine.
Oggi non è per nulla raro navigare su siti ricchi di animazioni, file flash e contenuti multimediali. 

Proprio di contenuti multimediali, in particolare video, si occuperà questo articolo.
La recente diffusione del fenomeno video, guidata da YouTube e Google Video, ha portato al diffondersi in rete di un quantitativo di contenuti multimediali impressionante.
Parallelamente, l'espansione e l'interesse verso i feed non poteva che scontrarsi prima o poi con l'esigenza di includere contenuti multimediali all'interno del nudo e crudo XML.

In questo articolo analizzeremo come sia possibile creare dei feed "multimediali", ovvero includere la distribuzione di file multimediali in un feed.

Caso studio: ICTv come cavia

Negli esempi seguenti prenderemo come caso studio ICTv, il nuovo progetto di HTML.it di televisione multimediale.
ICTv integra tutte le caratteristiche che ci interessano per un corretto studio:

  1. è un sito che si basa su contenuti video
  2. dispone di un feed RSS
  3. distribuisce gli ultimi video via feed

La scelta di ICTv è stata quella di produrre un feed RSS 2.0 integrando all'interno i video ed il testo descrittivo.
Ecco come si presenta il feed

<?xml version="1.0" encoding="ISO-8859-1"?>
<rss version="2.0">
<channel>

<title>ICTv</title>
<link>http://www.ictv.it</link>
<description>WebTv e video su tecnologia, informatica e digital Life</description>

[...]

<item>

<title><![CDATA[ L'innovazione più importante delle Adobe CS3 ]]></title>

<link>http://www.ictv.it/file/vedi/78/linnovazione-piu-importante-delle-adobe-cs3/</link>
<description><![CDATA[ Abbiamo chiesto ad alcuni dei protagonisti dell'Adobe Live 2007 quali sono le novità più interessanti portate dalle nuove Creative Suite
<br /><br />
<object type="application/x-shockwave-flash" data="http://www.ictv.it/videoplayer/players/player1.swf" width="470" height="405">
<param name="movie" value="http://www.ictv.it/videoplayer/players/player1.swf" />
<param name="flashvars" value="uid=Ds8seHrRsxAqlVVpM20GYokuQBI=&player=1&external=0" />
</object> ]]></description>
[...]
<guid>http://www.ictv.it/file/vedi/78/linnovazione-piu-importante-delle-adobe-cs3/</guid>

</item>

[...]

La parte iniziale rappresenta l'intestazione del feed, dalla quale ho rimosso le informazioni che non ci interessano.

Contenuto all'interno dei tag <item></item> troviamo la parte di feed che identifica la pagina di un video con il suo contenuto.
L'esempio sopra riportato corrisponde al video L'innovazione più importante delle Adobe CS3.

Come potete notare, il tag <description> contiene sia la descrizione del video sia il codice HTML necessario a riprodurlo attraverso un lettore flash.
Nelle prossime pagine andremo a vedere i vantaggi e gli svantaggi di questa soluzione ed adatteremo questo estratto di feed alle nostre esigenze.

L'RSS? Sì, ma nel modo corretto

Il formato RSS, nelle sue versioni e sfaccettature, è il formato di feed attualmente più diffuso ed anche quello più "antico". Rispetto al suo più diretto concorrente infatti, l'RSS 2.0 è lontano almeno un paio d'anni dall'Atom 1.0.

Questo dettaglio, nel web, non è necessariamente un vantaggio. L'RSS 2.0, infatti, è stato progettato in una fase del web non interessata da contenuti altamente multimediali, dove l'esigenza di includere un video o un filmato flash in un feed era assolutamente remota.

Il modo corretto

Per includere un elemento multimediale in un item di un feed RSS 2.0 è necessario ricorrere al tag <enclosure>. Questo tag contiene 3 attributi obbligatori che descrivono:

  1. l'URL della risorsa, ovvero del file multimediale da includere
  2. la sua lunghezza
  3. il content type della risorsa

Volendo dunque implementare il tag <enclosure> nel nostro feed iniziale di ICTv, sarà necessario modificare il contenuto all'interno dei tag <item></item>. L'intestazione del feed, infatti, rimarrà invariata.

<item>
<title><![CDATA[ L'innovazione più importante delle Adobe CS3 ]]></title>
<link>http://www.ictv.it/file/vedi/78/linnovazione-piu-importante-delle-adobe-cs3/</link>
<description><![CDATA[ Abbiamo chiesto ad alcuni dei protagonisti dell'Adobe Live 2007 quali sono le novità più interessanti portate dalle nuove Creative Suite ]]></description>

[...]
<guid>http://www.ictv.it/file/vedi/78/linnovazione-piu-importante-delle-adobe-cs3/</guid>
<enclosure url="http://www.ictv.it/videoplayer/players/player1.swf?uid=Ds8seHrRsxAqlVVpM20GYokuQBI=&player=1&external=0" length="40124" type="application/x-shockwave-flash" />

</item>

Come potete notare, ora è presente il tag <enclosure>.
La URL è esattamente l'indirizzo del video composto dall'URL del player flash e dalle variabili. In precedenza, entrambi questi valori erano contenuti all'interno del tag object.

Gli attributi length e type contengono rispettivamente il peso del video in byte ed il tipo di content-type.Chi distribuisce il feed senz'altro è a conoscenza di questi due dati, in alternativa è possibile ricavarli leggendo gli header HTTP restituiti dal webserver per la richiesta al file video.

Nel nostro caso:

Date: Sun, 17 Jun 2007 13:57:17
GMT
Server: Apache

Last-Modified: Mon, 11 Jun 2007 16:37:05
GMT
Etag: "e25cf-9cbc-466d7a31"
Accept-Ranges: bytes
Content-Length: 40124

Content-Type: application/x-shockwave-flash

Rispetto alla versione originale del feed abbiamo ottenuto due grandi vantaggi:

  1. uso corretto del feed: poiché abbiamo usato ogni tag nel modo corretto (in realtà avremmo dovuto convertire anche <description> in plain text, ma questo dettaglio non è oggetto di questo articolo) un eventuale parser sarà in grado di leggere correttamente il feed e gestire al meglio i contenuti multimediali allegati
  2. feed leggero e semplificato: spostando il contenuto multimediale all'interno di enclosure abbiamo semplificato ed alleggerito il feed, inoltre siamo certi che gli aggregatori non mostreranno all'utente un video integrato in una descrizione senza che non sia l'utente stesso a volerlo o non sia caratteristica dell'aggregatore.

Errori comuni

Gli errori più comuni per chi diffonde un video via feed RSS sono quasi tutti riconducibili ad un uso dei tag non coerente con la loro definizione.

Nello specifico, il tag <description> non è stato concepito per accogliere dati che non fossero plain text, quindi integrare contenuti HTML o multimediali via tag propri del linguaggio HTML può comportare problemi non indifferenti agli utenti.

Gli aggregatori potrebbero non essere in grado di leggere il feed così come potrebbero leggerlo o interpretarlo in modo errato mostrandovi il contenuto del tag <object> invece che riprodurlo.
Nella peggiore delle situazioni, migliore per la sicurezza dell'utente, gli aggregatori potrebbero filtrare i tag multimediali rendendo il vostro feed... quasi vuoto!

Media RSS: estendere il feed con contenuti multimediali

Se il tag <enclosure> è troppo limitato per i vostri scopi allora potrebbe essere giunto il momento di estendere il vostro feed.

Poiché i feed sono documenti XML, per estenderli è sufficiente ricorrere ai namespace.Per chi volesse approfondire il discorso suggerisco l'articolo Il misterioso mondo dei namespaces o i capitoli 12 e 13 della guida XML.

Tra i moduli creati e studiati per i feed ne esiste uno chiamato Media RSS.
Media RSS è un modulo creato in origine da Yahoo!, utilizzato per distribuire via feed i risultati delle ricerche multimediali a Yahoo! Search.

Questo formato ha conosciuto una forte diffusione grazie alla consapevolezza di rappresentare una specifica eccellente per la distribuzione di feed multimediali. Per portare dei celebri esempi, anche Google Video ha scelto di utilizzare Media RSS per allegare i video all'interno dei propri feed.

Una volta dichiarato il namespace come segue:

xmlns:media="http://search.yahoo.com/mrss"

avremo accesso ad un numero aggiuntivo di tag per descrivere il nostro feed. Ecco i principali:

<media:group>

L'elemento contenitore per raccogliere più versioni dello stesso elemento multimediale.

<media:content>

Il cuore di questo modulo. Rappresenta una versione "potenziata" del tag enclosure. I suoi attributi descrivono l'URL del video, la lunghezza, il peso e dettagli avanzati come il framerate e la durata in secondi.

<media:rating>

Permette di implementare una classificazione della risorsa per audience segnalando il video, ad esempio, come adatto ad un pubblico adulto.

<media:title>, <media:description>, <media:keywords>

Identificano rispettivamente il titolo della risorsa, la sua descrizione ed un set di keyword.

<media:thumbnail>

L'immagine da utilizzare come miniatura per il video.

Le specifiche identificano poi una decina di altri tag utili per catalogare e descrivere al meglio il contenuto multimediale.

Media RSS applicato a ICTv

Torniamo al nostro solito feed per ICTv. Vediamo come potremmo integrare il modulo Media RSS all'interno del feed originale.

<?xml version="1.0" encoding="ISO-8859-1"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss">
<channel>

<title>ICTv</title>

<link>http://www.ictv.it</link>

<description>WebTv e video su tecnologia, informatica e digital Life</description>

[...]

<item>

<title><![CDATA[ L'innovazione più importante delle Adobe CS3 ]]></title>
<link>http://www.ictv.it/file/vedi/78/linnovazione-piu-importante-delle-adobe-cs3/</link>
<description><![CDATA[ Abbiamo chiesto ad alcuni dei protagonisti dell'Adobe Live 2007 quali sono le novità più interessanti portate dalle nuove Creative Suite ]]></description>

[...]
<guid>http://www.ictv.it/file/vedi/78/linnovazione-piu-importante-delle-adobe-cs3/</guid>

<media:content
url="http://www.ictv.it/videoplayer/players/player1.swf?uid=Ds8seHrRsxAqlVVpM20GYokuQBI=&player=1&external=0"
fileSize="40124"
type="application/x-shockwave-flash"
medium="video"
isDefault="true"
duration="185"
height="405"
width="470"
lang="it">
<media:title type="plain">L'innovazione più importante delle Adobe CS3</media:title>

<media:description type="plain">Abbiamo chiesto ad alcuni dei protagonisti dell'Adobe Live 2007 quali sono le novità più interessanti portate dalle nuove Creative Suite.</media:description>
</media:content>

</item>

[...]

Come potete notare, questa volta ci tocca modificare anche l'intestazione aggiungendo la dichiarazione del modulo.
In seguito, possiamo utilizzare qualsiasi tag offerto da Media RSS per descrivere il nostro feed ed allegarci il contenuto video.

Non ho voluto esagerare, ma avrei potuto arricchiere ulteriormente il feed con altri dati già presenti nella pagina finale del video.
Prendendo come esempio il video di Francesco sui feed, potrei aggiungere

  1. <media:category> per descrivere le categorie di appartenenza
  2. <media:credit> per attribuire la proprietà ad HTML mentre il diritto d'autore a Francesco
  3. <media:copyright> per attribuire il copyright a HTML.it S.r.l.
  4. <media:text> per inserire la trascrizione del video, ovvero il contenuto parlato

Atom 1.0: un salto avanti da RSS 2.0

In questa panoramica non potevo non includere l'Atom 1.0.
Questo formato, per certi versi, è molto più evoluto rispetto all'RSS (per approfondimenti RSS vs Atom) e consente di integrare contenuti HTML all'interno del tag content.

Questo cosa significa?

In sintesi, potremmo trascrivere il nostro feed originale da RSS 2.0 a Atom 1.0 ed otterremmo l'opportunità di inserire il tag <object> all'interno del contenuto del feed, opportunità che abbiamo visto essere negata dall'RSS 2.0 che prevede solo testo per il tag <description>.

<entry>

<title>L'innovazione più importante delle Adobe CS3</title>
<link rel="alternate" type="text/html" href="http://www.ictv.it/file/vedi/78/linnovazione-piu-importante-delle-adobe-cs3/" />
<id>wK3Ue//ybMRmcn2sblTCWqWsAOY</id>

<summary>Abbiamo chiesto ad alcuni dei protagonisti dell'Adobe Live 2007 quali sono le novità più interessanti portate dalle nuove Creative Suite.</summary>
<author>
<name>Redazione ICTv</name>
<email>info@ictv.it</email>
</author>

<content type="html" xml:lang="it" xml:base="http://www.ictv.it/">Abbiamo chiesto ad alcuni dei protagonisti dell'Adobe Live 2007 quali sono le novità più interessanti portate dalle nuove Creative Suite
<br /><br />
<object type="application/x-shockwave-flash" data="http://www.ictv.it/videoplayer/players/player1.swf" width="470" height="405">
<param name="movie" value="http://www.ictv.it/videoplayer/players/player1.swf" />
<param name="flashvars" value="uid=wK3Ue//ybMRmcn2sblTCWqWsAOY=&amp;player=1&amp;external=0" />
</object></content>

[...]

</entry>

Quanto sopra riportato è il contenuto del tag <entry>, l'equivalente per l'Atom 1.0 del tag <item> per il feed RSS 2.0.

Come potete notare, è presente un tag <summary> che corrisponde al tag <description> del feed iniziale di ICTv mentre il contenuto completo, incluso il tag <object>, è stato incluso nel tag <content> con specifica type="html".

è importante sottolineare come l'intero contenuto all'interno del tag <content> va comunque codificato secondo le specifiche XML.

In conclusione

In questo articolo abbiamo affrontato 3 metodi per integrare contenuto multimediale all'intendo di feed, sia RSS 2.0 sia Atom 1.0.

  1. Tag <enclosure>
  2. Modulo Media RSS
  3. Atom 1.0 e contenuto HTML

La soluzione suggerita è senz'altro la seconda, tuttavia ha lo svantaggio che non tutti i parser potrebbero supportare questo modulo.

A voi la scelta.

Ti consigliamo anche