Popup swf player utilizzando javascript e DHTML

[Fabiettoo]

Ciao ragazzi da giorni sto combattendo con questo script, che praticamente crea una finestra popup che può essere incorporata in modo dinamico nella pagina semplicemente cliccando su un link.

Utilizzando i tag div dinamici e JavaScript che rende molto più semplice incorporare più video sulla pagina senza creare contenitori div statici per i video. Per inserire un video è sufficiente creare qualsiasi tipo di testo o link immagine che chiama la funzione JavaScript openCacaoweb () con un clic del mouse per creare una feìinestra popup dinamica. Il collegamento dovrebbe apparire simile al seguente:

<a href="#" onclick="openCacaoweb('video_id')">Video Title</a>

Dove video_id può essere estratto da l'URL di Megavideo, come mostrato in rosso di seguito:

http://www.megavideo.com/?v=CMA96TKB

codice javascript:

function openCacaoweb(id){
      //Cacaoweb Player Parameters 
      var width = 640;
      var height = 397;
     
      //Calculate Page width and height 
      var pageWidth = window.innerWidth;
      var pageHeight = window.innerHeight;
      if (typeof pageWidth != "number"){
      if (document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
      } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
            }
      }
      // Make Background visible... 
      var divbg = document.getElementById('bg');
      divbg.style.visibility = "visible";
     
      //Create dynamic Div container for Cacaoweb Popup Div 
      var divobj = document.createElement('div');
      divobj.setAttribute('id',id); // Set id to Cacaoweb id
      divobj.className = "popup";
      divobj.style.visibility = "visible";
      var divWidth = width + 4;
      var divHeight = height + 20;
      divobj.style.width = divWidth + "px";
      divobj.style.height = divHeight + "px";
      var divLeft = (pageWidth - divWidth) / 2;
      var divTop = (pageHeight - divHeight) / 2 - 10;
      //Set Left and top coordinates for the div tag 
      divobj.style.left = divLeft + "px";
      divobj.style.top = divTop + "px";
     
      //Create dynamic Close Button Div 
      var closebutton = document.createElement('div');
      closebutton.style.visibility = "visible";
      closebutton.innerHTML = "<span onclick=\"closeCacaoweb('" + id +"')\" class=\"close_button\">X</span>";
      //Add Close Button Div to Cacaoweb Popup Div container
      divobj.appendChild(closebutton);

     //Create dynamic Cacaoweb Div 
      var ytobj = document.createElement('div');
      ytobj.setAttribute('id', "yt" + id);
      ytobj.className = "ytcontainer";
      ytobj.style.width = width + "px";
      ytobj.style.height = height + "px";
      var Cacaoweb = "<object width=\"" + width + "\" height=\"" + height + "\">";
      Cacaoweb += '<param name="allowScriptAccess" value="always" />';
      Cacaoweb += '<param name="allowFullScreen" value="true" />'; 
      Cacaoweb += '<param name="quality" value="best" />';
      Cacaoweb += '<param name="flashvars" value="file=http://127.0.0.1:4001/megavideo/megavideo.caml?videoid=" + id />';
      Cacaoweb += '<param name="movie" value="http://www.cacaoweb.org/player/currentplayer.swf" />';
      Cacaoweb += '<embed src="http://www.cacaoweb.org/player/currentplayer.swf" ';
      Cacaoweb += 'flashvars="file=http://127.0.0.1:4001/megavideo/megavideo.caml?videoid=" + id ';
      Cacaoweb += 'quality="best" width="640" height="397" allowScriptAccess="always" enablejs="true" allowFullScreen="true" ';
      Cacaoweb += 'type="application/x-shockwave-flash" />';
      Cacaoweb += '</object>';
      ytobj.innerHTML = Cacaoweb;
     //Add Cacaoweb Div to Cacaoweb Popup Div container
      divobj.appendChild(ytobj);
     
      //Add Cacaoweb Popup Div container to HTML BODY 
      document.body.appendChild(divobj);
}
function closeCacaoweb(id){
      var divbg = document.getElementById('bg');
      divbg.style.visibility = "hidden";
      var divobj = document.getElementById(id);
      var ytobj = document.getElementById("yt" + id);
      divobj.removeChild(ytobj); //remove Cacaoweb Div
      document.body.removeChild(divobj); // remove Popup Div
}

codice css:

.popup {
      position: absolute;
      z-index: 2;
}
.popup_bg {
      position: absolute;     visibility: hidden;
      height: 100%; width: 100%;
      filter: alpha(opacity=0); /* for IE */
      opacity: 0; /* CSS3 standard */
      left: 0px; top: 0px;
      background-color: #999;
      z-index: 1;
}
.ytcontainer {
      border: 2px solid #666;
      clear: both;
}
.close_button {
      font-family: Verdana, Geneva, sans-serif;
      font-size: small; font-weight: bold;
      color: #666; text-decoration: none;
      display: block; float: right;
      background-color: #FFF;
      z-index: 3; cursor: default;
      border: 2px solid #666;
      margin-bottom: -2px;
      padding: 0px 3px 0px 3px;
}
body { margin: 0px; }

Codice HTML per incorporare il player popup Cacaoweb:

<a href="#" onclick="openCacaoweb('CMA96TKB')">Open Video</a><br />
<div id="bg" class="popup_bg"></div>

Pagina esempio: http://xrl.in/73y9

Praticamente non riesco a far passare l'ID, infatti come potete vedere dal link sopracitato il player mi da errore link non valido. Qualcuno può buttare un occhio al codice javascript per vedere dove sbaglio ? grazie.

 

[Fabiettoo]

Ok ragazzi grazie lo stesso ho risolto sbaglivo la sintassi:

Prima (quella sbagliata):

'flashvars="file=http://127.0.0.1:4001/megavideo/megavideo.caml?videoid=" + id ';

Dopo (quella giusta):

'flashvars="file=http://127.0.0.1:4001/megavideo/megavideo.caml?videoid=' + id + '" ';

Potete chiudere:hammer: