Ajuda Javascript DOM

IvoSlash

Power Member
Boas pessoal!
Estou aqui com uma duvida.
É o seguinte: estou a desenvolver uma pagina html que tem como base um form onde o utilizador insere a sua procura e ele dá como resultado um video principal e 3 videos relacionados.
Até aqui tudo bem, está tudo a funcionar. Contudo, os 3 related videos queria que ao clicar na sua thumbnail, fossem reproduzidos na janela do video principal e não num novo separador. Alguem me pode ajudar nisso? Em anexo deixo o meu codigo javascript.
Cumps

Código:
// videoSearch.js
// Utiliza a base do código de brwHTTPRequest.js
//   de invocação de um HTTP Get Request
//     adaptada à Orientação aos Objectos para ser mais reutilizável
  
// Variáveis globais
var youtubeRequest;
var xsltRequest;

// Representa o documento XML devolvido pelo Youtube
var xmlDoc;


function initYoutube()
{
    var frm, divDetalhes;
    
    youtubeRequest = new httpRequest();
    youtubeRequest.setCallback(  processaRespostaYoutube );
    
    frm = document.getElementById( 'Formulario' );
    
    frm.onsubmit = invocaYoutubeAPI;
    
}


// Compõe um pedido HTTP ao Web Service do Youtube
function invocaYoutubeAPI()
{
    var termoProcura, urlRequest;
    var urlReq_part1 = "http://gdata.youtube.com/feeds/api/videos?q=";
    var urlReq_part3 = "+gameplay&max-results=3&v=2";
    
    termoProcura = document.getElementById('search-term').value;
    
    // É necessário codificar os caracteres internacionais no request
    // encoding them with the proper escape sequence, to make sure the text is usable in a URL
    termoProcura = encodeURIComponent(termoProcura); 

    urlRequest = urlReq_part1 + termoProcura + urlReq_part3;
    
        <!--alert (urlRequest );-->
    youtubeRequest.invocaPedidoHTTP( urlRequest ); 
    
    return false;
}

// Utilizamos a DOM Api para extrair os dados que nos interessam da resposta XML  
function processaRespostaYoutube()
{
      <!--alert(youtubeRequest.getResponseText() );-->
   // Var global       
   xmlDoc = youtubeRequest.getResponseXML();      


    xsltRequest = new httpRequest();
    xsltRequest.setCallback(  processaXSLT );
    xsltRequest.invocaPedidoHTTP( "YouTubeSearch.xslt" );
    
    return false;  
   
}


function processaXSLT()
{
    var xsltDoc;
    var divSearchResults;
    
        <!--alert(xsltRequest.getResponseText() );-->
    
    xsltDoc = xsltRequest.getResponseXML();      
    
        
    divSearchResults = document.getElementById( "searchResults" );
        
    // Código para o IE
    if (window.ActiveXObject)
      {
          divSearchResults.innerHTML = xmlDoc.transformNode( xsltDoc );
      }
    // Código para o Mozilla, Firefox, Opera, etc.
    else if (document.implementation 
             && document.implementation.createDocument)
      {
          xsltProcessor=new XSLTProcessor();
          xsltProcessor.importStylesheet( xsltDoc );
          resultDocument = xsltProcessor.transformToFragment( xmlDoc, document );
          divSearchResults.appendChild(resultDocument);
      }

    activaLinksVideo();
    
}


function activaLinksVideo()
{

    var listaVideos, linksVideo, i;
    
    listavideos = document.getElementById("listaVideos");
    
    linksVideo = listavideos.getElementsByTagName("a");
        
    for ( i=0; i < linksVideo.length; i++ )
    {
        var l = linksVideo[i].href;
       linksVideo[i].onclick = function(){ mostraVideo(l); return false; } 
    }
}
function mostraVideo(videoLink)
{
    alert(videoLink);
    // DOM, aceder ao objecto pçayer

}




// Função auxiliar que procura a <entry> 
//  correspondente ao videoid passado como parâmetro
function procuraVideo( videoid )
{
    
    
        

}

// *********   Base de código que acciona pedidos HTTP  **************** 
//               Adaptada à orientação aos objectos    
//             Simulamos na função httpRequest a classe httpRequest  

function httpRequest()
{
    var request, callback;

    // Método público
    this.getResponseText = function()
    {
        return request.responseText;
    }
    
    // Método público
    this.getResponseXML = function()
    {
        return request.responseXML;
    }

    // Método público
    this.setCallback = function( nomefuncao )
    {
        callback = nomefuncao;
    }




    // Método público
    this.invocaPedidoHTTP = function ( url )
    {
      
      try 
      {
        // Se for o Firefox, contornar o modelo de segurança 
        if (netscape.security.PrivilegeManager.enablePrivilege)
        {
          netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
        }
      } 
      catch (e) 
      {
        // se não é Firefox, ignora a excepção 
      }

        
      request = createXMLHttpRequestObject();
      
      request.open("GET", url , true);
      request.onreadystatechange = testaChegadaResposta;

      request.send(null);

      return false;
    }



    // Método Privado
    // Testa a chegada da Resposta a um pedido http Request  
    function testaChegadaResposta()
    {
        
        if (request.readyState != 4) 
        {
            // Request has not yet completed
            return;
        }   
        
        // Uma vez o Request complete, isto é, chegada a resposta ao pedido HTTP
        // poderemos tratar de processar a resposta
        
        try
        {
            // Se for o Firefox, contornar o modelo de segurança 
            if (netscape.security.PrivilegeManager.enablePrivilege)
            {
              netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
            }
        }
        catch (e) 
        {
            // Se não for o Firefox, podemos ignorar a excepção 
        }
        
        
        callback( );
     
    }  


    // Método Privado
    // Função retirada do livro Bulletproof Ajax
    // A criação de um novo objecto XMLHttpRequest é diferente no I.E e no Firefox
    function createXMLHttpRequestObject() {
      var xhr = false;
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        try {
          xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
          try {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
          } catch(e) {
            xhr = false;
          }
        }
      }
      return xhr;
    }

}  // end httpRequest
 
para usares o video no local já existente, tens de editar um elemennto já existente e mudares-lhe o source.


tens de ter um iframe
<iframe id="video_player" title="YouTube video player" class="youtube-player" type="text/html"
width="640" height="390" src="http://www.youtube.com/embed/W-Q7RMpINVo"
frameborder="0" allowFullScreen></iframe>

e depois em js: document.getElementById('video_player').src='http://www.youtube.com/embed/43f4sdf3e43;
 
Última edição:
Back
Topo