1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Ajuda Javascript DOM

Discussão em 'Web Development' iniciada por IvoSlash, 2 de Junho de 2012. (Respostas: 1; Visualizações: 510)

  1. IvoSlash

    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
     
  2. franklopez

    franklopez Power Member

    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: 5 de Junho de 2012

Partilhar esta Página