Saturday, June 2, 2012

[YouTube-API] Playing related videos in the main player object

Hello all!
I'm making a webpage to play some videos based on an user-input query.
The page already can show the main video and 3 related videos.
right now, my problem is that if I click on any of the related videos, it will open the video on a new tab/window.
My wish is to play the related video in the main window. How can I make this possible?
My .js code stands as this:

// 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 player
 
 
var entry, videoid;
 
var player, param, embed;
 
var content, contentUrl, contentType;
 
 
     
// Obter o videoid correspondente ao hiperlink clickado
 
// O atributo id do hiperlink contem o videoid



 
// Procurar no documento XML (variável global xmlDoc )
 
// o elemento <entry> correspondente ao videoid  





 
// No elemento <entry> encontrado
 
//  obter do elemento media:group/media:content
 
//  o valor dos atributos  url e type  




 
// ****** Actualiazar o documento XHTML de OUTPUT *****
 
//        Actualizar os dados do div #player de forma a
 
//             a aparecer o video desejado

 
// Obter uma referencia para o elemento div#player
 
 
 
// Obter uma referencia para os elementos <param> e <embed>


 
// Actualizar o atributo value do elemento <param>
 
//      com o valor de contentUrl



 
// Actualizar o atributo src do elemento <embed>
 
//      com o valor de contentUrl



 
// Actualizar o atributo type do elemento <embed>
 
//      com o valor de contentType
 
 
return false;

}

// *********   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

PS: Never mind the comment tags, they are in my language, Portuguese. ;)

Thanks!!

--
You received this message because you are subscribed to the Google Groups "YouTube APIs Developer Forum" group.
To view this discussion on the web visit https://groups.google.com/d/msg/youtube-api-gdata/-/lEFeW8CznDgJ.
To post to this group, send email to youtube-api-gdata@googlegroups.com.
To unsubscribe from this group, send email to youtube-api-gdata+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/youtube-api-gdata?hl=en.

No comments:

Post a Comment