mag
25
Written by:
AL
25/05/2010 10.24
Abbiamo a disposizione diverse opzioni per la pubblicazione di video in DotNetNuke, a seconda del formato del file video e del risultato che si vuole ottenere.
Premessa
DotNetNuke adotta un filtro sui tipi di file che gli utenti possono uploadare: in “Host Settings > Other Settings > Allowable File Extensions” troviamo l’elenco delle estensioni di file consentite, che possiamo personalizzare.
Modulo DNN Media
Questo modulo consente di pubblicare molto semplicemente un video in un box dedicato su una pagina. Dopo aver aggiunto il modulo Media alla pagina è necessario accedere alla sua configurazione, cliccando su Edit Media Options: da qui è quindi possibile caricare il file con la consueta interfaccia di gestione file.
Il modulo consente di pubblicare vari tipi di video: jpg,jpeg,jpe,gif,bmp,png,swf,AVI,MPEG,MP3,ASF,ASX,WMA,WMV,WAV,MIDI,QT,MOV,RM,RAM,RPM. Non sono al momento supportati i Flash video (FLV).
Modulo Text/HTML
Se lo scopo è invece quello di inserire il video in-line all’interno di un normale testo, pubblicato per mezzo di un modulo Text/HTML (solo “HTML” dalla versione 5 di DNN), abbiamo a disposizione le seguenti opzioni.
Inserisci Oggetto Flash
Se disponiamo di un filmato flash SWF possiamo sfruttare l’apposito meccanismo dell’editor FCK, come qui mostrato.
Embed manuale
Negli altri casi possiamo procedere manualmente, introducendo nell’editor il codice HTML necessario alla pubblicazione del video.
Per pubblicare un video e visualizzarlo con il plugin di Windows Media Player:
1: <div style="width: 800px; heigth: 600px">
2: <embed src="http://localhost/dotnetnuke/portals/0/_Video/mediamodule_loadswf.swf"
3: Align="center"
4: pluginspage="http://download.microsoft.com/download/winmediaplayer/nsplugin/6.4/WIN98/EN-US/wmpplugin.exe"
5: type="application/x-mplayer2"></div>
Si noti che l’attributo SRC del tag EMBED contiene l’indirizzo HTTP del filmato. Chiaramente questo meccanismo può essere utilizzato per qualunque ipertesto gestito tramite editor FCK.
Embed manuale con Flash player
L’embed manuale di cui sopra non consente di personalizzare la modalità di pubblicazione del video: per ottenere qualcosa di più accattivante dobbiamo quindi utilizzare un player esterno, tipicamente Flash, a cui faremo caricare il nostro video.
E’ quindi necessario prima di tutto disporre di un player: per esempio l’ottimo JW Player (http://www.longtailvideo.com/).
Una volta scaricato il player dovremo renderlo disponibile sul nostro sito, copiando i file necessari in una cartella visibile al pubblico (o a chi dovrà utilizzare il player). Nel nostro caso abbiamo creato la cartella /Portals/_default/jw, copiandoci quindi i file:
- player-viral.swf, l’oggetto flash che implementa il player
- swfobject.js, codice javascript per gestire il player,
- yt.swf, oggetto flash specializzato per la visualizzazione di filmati YouTube.
A questo punto non ci resterà che inserire all’interno del nostro testo il codice HTML per l’embed:
1: <object id="single1" width="470" name="single1" height="320" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
2: <param name="movie" value="/Portals/_default/jw/player-viral.swf" />
3: <param name="allowfullscreen" value="true" />
4: <param name="allowscriptaccess" value="always" />
5: <param name="wmode" value="transparent" />
6: <param name="flashvars" value="file=/Portals/0/_Video/SafetyTapeAVIMed_Prog_002.swf" />
7: <embed id="single2" width="470" name="single2" height="320" flashvars="file=/Portals/0/_Video/SafetyTapeAVIMed_Prog_002.swf"
8: allowfullscreen="true" allowscriptaccess="always" bgcolor="#ffffff" src="/Portals/_default/jw/player-viral.swf"></embed></object>
Embed manuale con Silverlight Player
Il player flash utilizzato al paragrafo precedente non supporta i file ASF / WMV: lo stesso produttore ha però a catalogo un player Silverlight che invece li supporta.
Come nel caso precedente, per utilizzare il player dovremo preventivamente pubblicare sul sito i file di supporto, e quindi inserire nel nostro testo il codice per l’embed.
I file di supporto, posizionati nuovamente nella cartella /Portals/_default/jw, sono in questo caso:
- silverlight.js,
- wmvplayer.js,
- wmvplayer.xaml.
Lo script per l’embed:
1: <script type="text/javascript" src="http://localhost/dotnetnuke/Portals/_default/jw/silverlight.js"></script> 1:
2: <script type="text/javascript" src="http://localhost/dotnetnuke/Portals/_default/jw/wmvplayer.js">
1: </script>
2: <script type="text/javascript">
3: jQuery(document).ready(function() { 4: var cnt = document.getElementById("mediaspace"); 5: var src = 'http://localhost/dotnetnuke/Portals/_default/jw/wmvplayer.xaml';
6: var cfg = { 7: file:'http://localhost/dotnetnuke/portals/0/_Video/20100305-RAI_TRE-TG3_NEAPOLIS_1500-154910796.ASF.WMV',
8: image:'http://localhost/dotnetnuke/Portals/_default/jw/preview.jpg',
9: height:'240',
10: width:'440'
11: };
12: var ply = new jeroenwijering.Player(cnt,src,cfg);
13: });
</script>
2: <div id='mediaspace'>mediaspace</div>
Nota: per consentire il corretto funzionamento del player è necessario fare in modo che il codice javascript sia lanciato non appena la pagina è stata caricata. Ho dunque incluso il codice di lancio nella seguente chiamata jQuery:
1: jQuery(document).ready(function() {
2: // codice
3: });
Video YouTube con un Widget
Una delle novità di DotNetNuke 5 è il sottosistema dei Widget, che consente di pubblicare facilmente contenuti provenienti da siti remoti. Vi rimando per un’introduzione all’argomento a questo post, dal quale ho estratto l’esempio sotto riportato per l’embed di un video YouTube.
1: <object id="EmbedYouTube" codetype="dotnetnuke/client" codebase="EmbedWidget" declare="declare">
2: <!-- (required) Type: The name of the Embed widget to use & determines the name of folder/file to look for it at -->
3: <!-- DNN: ~/Resources/Widgets/DNN/EmbedWidgetResources/[Type]/[Type].snippet.htm -->
4: <!-- Non-DNN: ~/Resources/Widgets/User/[Publisher]/EmbedWidgetResources/[Type]/[Type].snippet.htm -->
5: <param name="Type" value="YouTube" />
6: <!-- (optional) MultiValueDelimiter: Use if you want to specify a new delimeter other than a semi-colon -->
7: <param name="MultiValueDelimiter" value=";" />
8: <!-- (optional) Publisher: Only necessary for non-DNN Embed snippets -->
9: <!-- When used, this determines the folder path to look for the snippets in: -->
10: <!-- ~/Resources/Widgets/User/[Publisher]/EmbedWidgetResources/[Type]/[Type].snippet.htm -->
11: <!--param name="Publisher" value="" /-->
12: <!-- Parameters Specific to YouTube Widget -->
13: <param name="src" value="_y36fG2Oba0" />
14: </object>
