JW Player 6 – Configurazione Base – DEPRECATA

jwplayer-logo-image

ATTENZIONE, questo sistema è ancora funzionante ma DEPRECATO.
Ciò significa che in futuro potrebbe non funzionare più.
Per utilizzare i nuovi parametri vi invitiamo a collegarvi al vostro pannello utente ed accedere alla pagina “Publish&Playback”, nella sezione “I Miei Streaming”.

JW Player è uno dei lettori multimediali più usati nel web. Grazie all’esperienza maturata negli anni, questo lettore consente, se opportunamente configurato, di riprodurre una trasmissione sia sui sistemi desktop che sui dispositivi mobili iOS/Android.
Vogliamo sottolineare che i dispositivi iOS sono ampiamente supportati, mentre Android ha delle lacune dovute alla mancanza di supporto del protocollo HLS (usato appunto sui dispositivi mobili). Le versioni “intermedie” di Android, in particolare, subiscono questa mancanza. Le vecchie versioni supportavano nativamente il plugin di Adobe, che consentiva di riprodurre il protocollo RTMP. Con le ultime versioni di Android, è stato rimosso il plugin di Adobe per implementare il protocollo HLS che ha ancora qualche lacuna ma almeno è utilizzabile.
Detto ciò stiamo lavorando su un’app per Android che integra un player capace di leggere il protocollo HLS in ogni versione di Android.
Premesso ciò, proseguiamo con quello che è lo scopo di questa guida.

Per usare JW Player 6 (JW6) nel proprio sito, prima di tutto è necessario caricare le librerie javascript necessarie, cioè jwplayer.js. Inoltre useremo una libreria javascript che abbiamo appositamente realizzato per sfruttare appieno i nostri servizi.

<script type="text/javascript" src="http://p.jwpcdn.com/6/8/jwplayer.js"></script><!-- Libreria JWPlayer -->

<div id="mediaplayer"></div><!-- Elemento presso cui verrà caricato JW6 -->

<script type="text/javascript" src="http://cdn.troydesign.eu/nome_stream_cliente/channelN"></script><!-- Libreria TroyDesign -->

La “Libreria JWPlayer” e la “Libreria TroyDesign” devono essere sempre caricate.

Libreria JWPlayer:
Di recente JW6 è disponibile con un sistema guidato che richiede la registrazione al loro sito. E’ consigliabile usare la libreria javascript “dinamica” fornita da loro se si acquista una licenza o se si vuole avere sempre una versione aggiornata del lettore. In questa guida, per brevità, noi caricheremo direttamente l’ultima versione (6.8 in questo momento) senza registrarci al loro sito.

Libreria TroyDesign:
La nostra libreria genera url dello streaming in modo dinamico, scegliendo quello migliore in quel momento e vi semplifica il lavoro. Grazie ad esso potremo fare modifiche al sistema senza che il cliente debba preoccuparsi di aggiornare il proprio sito.
L’url http://cdn.troydesign.eu/nome_stream_cliente/channelN andrà modificato in base al cliente e al canale che si usa. Ad esempio se volessi usare il “canale 1″ che è stato assegnato al cliente “troydesign” userò l’url http://cdn.troydesign.eu/troydesign/channel1

Passiamo ora alla configurazione base per visualizzare JW6.

Esempio con configurazione Responsive(larghezza e altezza dinamica):

jwplayer('mediaplayer').setup({
	'playlist': [{
		'sources': [{file: TDCDN[0].rtmp.auto()},{file: TDCDN[0].hls.auto()}]
	}],
	'width': '100%',
	'aspectratio': '16:9',
});

Esempio con configurazione Fixed(larghezza e altezza definita):

jwplayer('mediaplayer').setup({
	'playlist': [{
		'sources': [{file: TDCDN[0].rtmp.auto()},{file: TDCDN[0].hls.auto()}]
	}],
	'width': '400',
	'height': '300',
});

Oltre alla configurazione base, sono disponibili altre opzioni per personalizzare JW6 specialmente se si acquista una licenza. Vi rimando al loro sito per approfondire: JWPlayer Website.
Spendiamo due parole per le istruzioni TDCDN[0].rtmp.auto() e TDCDN[0].hls.auto(). Esse “passaranno” al lettore gli url dello streaming, generati grazie al caricamento della “Libreria TroyDesign”.

Se si vuole usare più di un lettore nella stessa pagina web, bisogna caricare più volte anche la “Libreria TroyDesign” ed opzionalmente definire il numero dell’instanza. Con un esempio sarà più comprensibile.
Supponiamo di voler visualizzare JW6 nella stessa pagina, sia con configurazione Responsive che Fixed.
Supponiamo che la Responsive mostrerà lo streaming del cliente “tizio” sul “canale 4″ mentre la Fixed mostrerà lo streaming del cliente “caio” “sul canale 7″
L’esempio completo è:

<script type="text/javascript" src="http://p.jwpcdn.com/6/8/jwplayer.js"></script><!-- Libreria JWPlayer -->

<script type="text/javascript" src="http://cdn.troydesign.eu/tizio/channel4/1"></script><!-- Libreria TroyDesign con numero di istanza 1 -->
<div id="mediaplayer_tizio">
	<div style="position:relative;height:0;padding-bottom:56.25%;background:#000;"><a style="color:#fff;position:absolute;top:0px;left:0px;right:0px;bottom:0px;width:100%;height:100%;display:block;background:transparent url('http://cdn.troydesign.it/playIcon.png') no-repeat center center" target="_blank"></a></div><!-- Fallbak con link HLS che permette di vedere lo streaming su Android con un player esterno -->
</div><!-- Elemento presso cui verrà caricato JW6 di tizio -->
<script type="text/javascript">
(document.getElementById('mediaplayer_tizio').getElementsByTagName('a')[0]).href=TDCDN[1].hls.auto(); //Fallbak link HLS
jwplayer('mediaplayer_tizio').setup({
	'playlist': [{
		'sources': [{file: TDCDN[1].rtmp.auto()},{file: TDCDN[1].hls.auto()}]
	}],
	'width': '100%',
	'aspectratio': '16:9',
	'fallback': false
});
</script>

<script type="text/javascript" src="http://cdn.troydesign.eu/caio/channel7/2"></script><!-- Libreria TroyDesign con numero di istanza 2 -->
<div id="mediaplayer_caio">
	<video controls loop style="width:300px;height:300px"></video><!-- Fallbak RTSP che potrebbe essere compatibile con alcune versioni di Android -->
</div><!-- Elemento presso cui verrà caricato JW6 di caio-->
<script type="text/javascript">
(document.getElementById('mediaplayer_caio').getElementsByTagName('video')[0]).src=TDCDN[2].rtsp.auto(); //Fallbak RTSP
jwplayer('mediaplayer_caio').setup({
	'playlist': [{
		'sources': [{file: TDCDN[2].rtmp.auto()},{file: TDCDN[2].hls.auto()}]
	}],
	'width': '400',
	'height': '300',
	'fallback': false
});
</script>

ATTENZIONE: Suggeriamo di caricare la Libreria TroyDesign prima dell’elemento presso cui verrà caricato JW6, specialmente se viene usato il fallback di questa guida.

Si rimanda alla documentazione della libreria TDCDN per maggiori dettagli: Libreria TDCDN
Per qualsiasi dubbio non esitate a contattarci.