Il concetto di streaming non è molto facile e comunque non si può realizzare così su due piedi. Con questa prima lezione, vogliamo però, darvi le basi per mettere da subito online il vostro prima filmato che apparirà all'interno di una pagina web.

Per questa lezione si necessita di:

• Un filmato in formato .wmv
• Una pagina html
• Lettore multimediale

Filmato .wmv
Il formato wmv è un formato standard di Microsoft Windows. Per realizzare tale file basta prendere un qualsiasi file .avi e trasformarlo con il Codificatore di Windows Media (scaricabile gratuitamente dal sito della Microsoft e che analizzeremo tra due lezioni)

Una pagina html
Nella pagina html sarà presente il filmato e la "barra degli strumenti" come play, stop, pausa e il visualizzatore di avanzamento del filmato.

> Vedi l'esempio che otterremo alla fine della lezione

La pagina html contiene due codici javascript che servono per l'utilizzo dei bottoni e l'esecuzione del filmato.

Entrambi vanno inseriti all'interno dei tag HEAD:

<script language=javascript> document.onmousedown=MouseClick; document.onmouseup=MouseClick; document.onmouseout=MouseOut; var clock; function MouseOver(theDiv) { theDiv.className="playerCtrlOver"; } function MouseOut(theDiv) { srcCtrl=window.event.srcElement; IMG=(srcCtrl.tagName=="IMG"); if(IMG) { srcCtrl.src=srcCtrl.src.replace("2.jpg",".jpg") } } function MouseClick() { srcCtrl=window.event.srcElement; IMG=(srcCtrl.tagName=="IMG"); if(IMG) { if(srcCtrl.src.indexOf("2.jpg")>0) { oldSrc=srcCtrl.src.replace("2.jpg",".jpg"); srcCtrl.src=oldSrc; } else { dotIndex=srcCtrl.src.indexOf("jpg")-1; srcCtrl.src=srcCtrl.src.substr(0,dotIndex)+"2.jpg"; } } } function UpdateTracker() { var xxx=new String; imgCount=(mPlayer.currentPosition/mPlayer.duration)*10; if(imgCount>0) { for(x=0;x<imgCount;x++) { xxx+="<img src='progress.jpg'>"; } if(position.style.display=="none") { position.style.display="" } position.innerHTML=xxx; if(imgCount>=10) { return 0 } } clock=window.setTimeout('UpdateTracker()',500); } function Setup() { WinWidth=document.body.clientWidth; WinHeight=document.body.clientHeight; controls.style.posTop=WinHeight-30; position.style.top=controls.style.posTop+10; closewin.style.top=controls.style.posTop+2; closewin.style.left=WinWidth-80; controls.style.display=""; divCount=document.all.tags("DIV").length; for(x=1;x<divCount;x++) { document.all.tags("DIV")[x].style.display=""; } } </script> <SCRIPT FOR="mPlayer" EVENT="PlayStateChange(lOldState, lNewState)" LANGUAGE="JScript"> STOPPED=0; PLAYING=2; switch(lNewState) { case STOPPED: mPlayer.stop(); window.clearTimeout(clock); position.style.display="none"; break; case PLAYING: clock=window.setTimeout('UpdateTracker()',500); break; } </SCRIPT>

Mentre nei tag body inseriremo il richiamo al file .wmv (che ricordiamo è il filmato) e i tasti che permettono l'esecuzione, la pausa e la chiusura della finestra.
Il tutto con questo codice:

<OBJECT classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id=mPlayer name=mPlayer width="239" height="179" > <param name="AudioStream" value="-1"> <param name="AutoSize" value="-1"> <param name="AutoStart" value="-1"> <param name="AnimationAtStart" value="-1"> <param name="AllowScan" value="-1"> <param name="AllowChangeDisplaySize" value="-1"> <param name="AutoRewind" value="0"> <param name="Balance" value="30"> <param name="BaseURL" value> <param name="BufferingTime" value="5"> <param name="CaptioningID" value> <param name="ClickToPlay" value="-1"> <param name="CursorType" value="0"> <param name="CurrentPosition" value="-1"> <param name="CurrentMarker" value="0"> <param name="DefaultFrame" value> <param name="DisplayBackColor" value="0"> <param name="DisplayForeColor" value="16777215"> <param name="DisplayMode" value="0"> <param name="DisplaySize" value="0"> <param name="Enabled" value="-1"> <param name="EnableContextMenu" value="0"> <param name="EnablePositionControls" value="-1"> <param name="EnableFullScreenControls" value="0"> <param name="EnableTracker" value="-1"> <param name="Filename" value="paesaggio.wmv"> <param name="InvokeURLs" value="-1"> <param name="Language" value="-1"> <param name="Mute" value="0"> <param name="PlayCount" value="1"> <param name="PreviewMode" value="0"> <param name="Rate" value="1"> <param name="SAMILang" value> <param name="SAMIStyle" value> <param name="SAMIFileName" value> <param name="SelectionStart" value="-1"> <param name="SelectionEnd" value="-1"> <param name="SendOpenStateChangeEvents" value="-1"> <param name="SendWarningEvents" value="-1"> <param name="SendErrorEvents" value="-1"> <param name="SendKeyboardEvents" value="0"> <param name="SendMouseClickEvents" value="0"> <param name="SendMouseMoveEvents" value="0"> <param name="SendPlayStateChangeEvents" value="-1"> <param name="ShowCaptioning" value="0"> <param name="ShowControls" value="0"> <param name="ShowAudioControls" value="0"> <param name="ShowDisplay" value="0"> <param name="ShowGotoBar" value="0"> <param name="ShowPositionControls" value="0"> <param name="ShowStatusBar" value="0"> <param name="ShowTracker" value="0"> <param name="TransparentAtStart" value="0"> <param name="VideoBorderWidth" value="0"> <param name="VideoBorderColor" value="0"> <param name="VideoBorder3D" value="0"> <param name="Volume" value="0"> <param name="WindowlessVideo" value="0"> </OBJECT> <br> <span id="controls" style="display:none; width:100%; border:1 white outset; background:#6699cc"> <center> <img style="cursor:hand" hspace=10 src="../immagini/stop.jpg" align=middle onclick="mPlayer.stop()" width="25" height="25"> <img style="cursor:hand" hspace=10 src="../immagini/play.jpg" align=middle onclick="mPlayer.play()" width="25" height="25"> <img style="cursor:hand" hspace=10 src="../immagini/pausa.jpg" align=middle onclick="mPlayer.pause()" width="25" height="25"> <div align=left style="display: none; position: top; top: 490; left: 50; width: 100; height: 8; background-color: white; background-repeat: repeat; background-attachment: scroll; background-position: 0%" id="position"><img src="../immagini/blankprg.jpg" width="10" height="10"> </div> <div align=left style="display:none; position:top; left:0; width:0px; font-family:tahoma; color:yellow; font-size:12px; font-weight:bold" id="percentage"> </div> <div id="closewin" align=left style="display:none; position:top; left:55; width:50px; height:0"> <p align="center"> <img src="../immagini/chiudi.jpg" onclick="window.close()" width="75" height="25"> </div> </center> </span>

Logicamente il nostro filmato sarà un Oggetto ActiveX con tutte le varie opzioni che analizzeremo nella prossima lezione.

> Vedi l'esempio che abbiamo ottenuto