Lorenzo Pascucci
a- a+

Il primo filmato onLine

Il concetto di streaming non è molto facile e comunquenon si può realizzare così su due piedi. Conquesta prima lezione, vogliamo però, darvi le basi permettere da subito online il vostro prima filmato cheapparirà 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 MicrosoftWindows. Per realizzare tale file basta prendere un qualsiasifile .avi e trasformarlo con il Codificatore di Windows Media(scaricabile gratuitamente dal sito della Microsoft e cheanalizzeremo tra due lezioni)

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

> Vedi l'esempio che otterremo alla fine dellalezione

La pagina html contiene due codici javascript che servono perl'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 (chericordiamo è il filmato) e i tasti che permettonol'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 ActiveXcon tutte le varie opzioni che analizzeremo nella prossimalezione.

> Vedi l'esempio che abbiamo ottenuto

 



Ti potrebbe interessare anche

commenta la notizia