Upgrade em código JS para conectar na API do VIMEO

lulinha ô cara! · Março 20, 2009

Olá,

o código abaixo está funcionando corretamente, ele funciona para poder conectar na API do site de videos chamado vimeo.com e capturar um thumbnail de um vídeo.

Preciso agora fazer um upgrade nesse código, vou montar em uma página HTML uma lista com os thumbnails de vários videos. Então eu precisava montar um código que ficasse fácil gerar essa lista, a idéia seria ter apenas 1 código java script que fosse usado para pegar os thumbnais.

Pensei em algo assim <img src="java script:funcao_capturar_thumb('2811329')">

Esse número '2811329' é o código do vídeo. Essa idéia de fazer essa função (java script:funcao_capturar_thumb) passaria o código do video para o JS que então retornaria o url do thumbnail

<script type="text/javascript">
  var video_id = '2811329';
  var url = 'http://vimeo.com/api/clip/' + video_id + '.json?callback=showThumbs';
  
  function showThumbs(clips) {
	var thumbs = document.getElementById('thumbs');
	thumbs.innerHTML = '';
  
	for (var i = 0; i < clips.length; i++) {
	  var thumb = document.createElement('img');
	  thumb.setAttribute('src', clips[i].thumbnail_medium);

	  var p = document.createElement('p');
	  p.appendChild(thumb);
	  thumbs.appendChild(p);
	}
  
  }
  function init() {
	var js = document.createElement('script');
	js.setAttribute('type', 'text/javascript');
	js.setAttribute('src', url);
	document.getElementsByTagName('head').item(0).appendChild(js);
  }
  
  window.onload = init;
  
</script>
<div id="thumbs">Loading thumb, aqui irá aparecer o thumbnail...</div>

Bom, eu não tenho conhecimento suficiente para fazer essa alteração. Estou lendo diversos tutoriais e baixando códigos java script parecidos para tentarchegar perto de uma solução.

Se alguém tiver o conhecimento e puder me dar uma dica me ajudaria muito.

Obrigado pela sua atenção.

lulinha ô cara! · Março 20, 2009

Olá,

fiz um progresso, retirei algumas partes do código ficando mais simples de entender:

<script type="text/javascript">	  
  
  var video_id = '2811329';
  var url = 'http://vimeo.com/api/clip/' + video_id + '.json?callback=MostrarThumbs';
  
  function MostrarThumbs(clips) {
	for (var i = 0; i < clips.length; i++) {
	  var url_do_thumbnail= clips[i].thumbnail_medium
	  thumbs.innerHTML = '<img src=' + url_do_thumbnail + '>';
	}
  }
  
  function executar() {
	var js = document.createElement('script');
	js.setAttribute('type', 'text/javascript');
	js.setAttribute('src', url);
	document.getElementsByTagName('head').item(0).appendChild(js);
  }
  
  window.onload = executar;
  
</script>

<div id="thumbs">Loading clips...</div>

acho que está faltando pouco agora, se eu conseguise fazer alguma coisa chamando o function executar passando o codigo do video resolveria... acho assim <img src="javascrip:executar('2983908')">

obs: se quiser testar é só colocar esse código num html simples que vai abir a imagem

William Bruno · Março 20, 2009

Hum.. você quer pode chamar várias vezes a função ?

<head>
<script type="text/javascript">  
  function MostrarThumbs(clips) {
	for (var i = 0; i < clips.length; i++) {
	  var teste = clips[i].thumbnail_medium
	  thumbs.innerHTML = '<img src=' + teste + '>';
	}
  }
  
  function executar( id ) {
	var js = document.createElement('script');
	var url = 'http://vimeo.com/api/clip/'+id+'.json?callback=MostrarThumbs'
	js.setAttribute('type', 'text/javascript');
	js.setAttribute('src', url);
	document.getElementsByTagName('head').item(0).appendChild(js);
  }
  
  window.onload = executar('2811320');
</script>
</head>
<body>

<div id="thumbs">Loading clips...</div>

Vai precisar passar por parâmetro tb, o lugar onde aparece o thumb.

A função showThumbs(clips) recebe um parâmetro..

como era a chamada dele ?

Percebo que ela espera que clips, seja um array.

O original mesmo, você pegou de onde ?

lulinha ô cara! · Março 20, 2009

Olá William,

(1) muito obrigado mesmo pela ajuda. É exatamente isso, chamar várias vezes a função numa mesma página HTML. Na verdade eu tenho um banco de dados com os códigos dos vídeos entao preciso fazer um sistema em ASP que informe esses códigos para o javascript que vai retornando o url das miniaturas dos vídeos.

(2) A função showThumbs(clips) que no meu código passei a chamar de MostrarThumbs(clips) recebe um parametro do url que do vimeo que está aqui no callback

var url = 'http://vimeo.com/api/clip/' + video_id + '.json?callback=showThumbs';

(3) O código original eu retirei desse link http://papermashup.com/using-the-vimeo-api/

(4) William, está faltando muito pouco agora, só falta encontrar uma forma de chamar o [executar('2811320');] dentro de um div ou outra coisa que não sei como fazer. Tipo assim <div id="thumbs,executar('2811320')">loading image here</div>

É lógico que isso ai encima da DIV não existe mas é uma forma apenas de te explicar, pois assim vou poder colcoar várias DIVs numa página e cada uma informando um codigo de video, assim cada uma exibirá sua respectiva miniatura.

vixe, ficou confuso minha explicacao...

lulinha ô cara! · Março 20, 2009

Willian eu tive uma ideia,

talvez na DIV informar o codigo do video no local do class, ai no java script eu capturo o class e coloco no lugar do codigo do video assim:

na java script usaria

var video_id = document.getElementById("thumbs").className

putz falta tao pouco e nao consigo

lulinha ô cara! · Março 20, 2009

Olha tentei uma nova idéia que resolveria porem não funcionou, olha esse:

<script type="text/javascript">  
  function executar(id_video,id_div) {
	var js = document.createElement('script');
	var url = 'http://vimeo.com/api/clip/'+id_video+'.json?callback=MostrarThumbs'
	js.setAttribute('type', 'text/javascript');
	js.setAttribute('src', url);
	document.getElementsByTagName('head').item(0).appendChild(js);
  }
  
  function MostrarThumbs(clips) {
	for (var i = 0; i < clips.length; i++) {
	  var url_do_thumbnail = clips[i].thumbnail_medium
	  document.getElementById(id_div).innerHTML = '<img src=' + url_do_thumbnail + '>';
	}
  }
</script>

Aqui seria o sistema páginando e capturando o numero de cada vídeo e mandando executar o java scrit, nessa idéia o java deveria enviar o código do video o nome da DIV aonde deveria ser retornado o resultado

<script type="text/javascript">
 window.onload = executar('2811123','div_video1');
</script>
<div id="div_video1">Loading video 1...</div>

<script type="text/javascript">
 window.onload = executar('1766353','div_video2');
</script>
<div id="div_video2">Loading video 2...</div>

<script type="text/javascript">
 window.onload = executar('3347307','div_video3');
</script>
<div id="div_video3">Loading video 3...</div>

lulinha ô cara! · Março 20, 2009

Bom, eu conseguir fazer num mesmo codigo chamar a mesma função varias vezes então no código abaixo que está funcionando eu tentei copiar e colar o codigo uma vez para cada video mudando em cada codigo copiando o id da DIV e o CODIGO do video. Mas ai não da certo... da um erro apartir do segundo video.

<script type="text/javascript">  
  function MostrarThumbs(clips) {
	for (var i = 0; i < clips.length; i++) {
	  var thumbs_url = clips[i].thumbnail_medium
	  div_video1.innerHTML = '<img src=' + thumbs_url + '>';
	}
  }
  function Executar(id) {
	var js = document.createElement('script');
	var url = 'http://vimeo.com/api/clip/'+id+'.json?callback=MostrarThumbs'
	js.setAttribute('type', 'text/javascript');
	js.setAttribute('src', url);
	document.getElementsByTagName('head').item(0).appendChild(js);
  }
</script>
<script type="text/javascript">Executar('1766353');</script>
<div id="div_video1">Loading video 1...</div>

vicoluis · Março 20, 2009

Bem,

fiz um codigo, que estava com um problema, quando setava o atributo src ao js, ele demorava para carregar o retorno e demorava para popular a imagem, então estava populando apenas o ultimo.

a unica forma que achei foi fazendo um if para saber se é o video atual, caso o carregamento fosse no for mesmo, não teria este problema

para chamar é facil, basta passar um array em json mesmo

getThumbs = {'thumb_list':[
								{'DIV':'ID_VIDEO_1','VIDEO':'1766353'},
								{'DIV':'ID_VIDEO_2','VIDEO':'2811320'},
								{'DIV':'ID_VIDEO_3','VIDEO':'3347307'}
							]
					}

Todo código

<script type="text/javascript">  
	PopulaThumb = function( Json)
	{	
		var ThumbUrl = Json[0].thumbnail_medium;
		var ThumbId  = Json[0].clip_id;
		for( thumb = 0; thumb < getThumbs.thumb_list.length; thumb ++)
		{
			var Div_Atual = (getThumbs.thumb_list[thumb]['DIV']);
			var Vid_Atual = (getThumbs.thumb_list[thumb]['VIDEO']);

			if(getThumbs.thumb_list[thumb]['VIDEO'] == ThumbId)
			{
				document.getElementById(Div_Atual).innerHTML = '<img src=' + ThumbUrl + '>';
			}
		}
	} 
	GetThumbs = function()
	{
		for( thumb = 0; thumb < getThumbs.thumb_list.length; thumb ++)
		{
			DivAtual = (getThumbs.thumb_list[thumb]['DIV']);
			VidAtual = (getThumbs.thumb_list[thumb]['VIDEO'])

			// CRIANDO RETORNO JSON
			var js = document.createElement('script');
			js.setAttribute('type', 'text/javascript');
			js.setAttribute('src', 'http://vimeo.com/api/clip/'+VidAtual+'.json?callback=PopulaThumb');

			document.getElementById(DivAtual).appendChild(js);
		}
	}
</script>
<script type="text/javascript">
	getThumbs = {'thumb_list':[
								{'DIV':'ID_VIDEO_1','VIDEO':'1766353'},
								{'DIV':'ID_VIDEO_2','VIDEO':'2811320'},
								{'DIV':'ID_VIDEO_3','VIDEO':'3347307'}
							]
					}
</script>
<head><title>Pegando Thumbs do VIMEO</title></head>
<div id="ID_VIDEO_1">Carregando video 1...</div>
<div id="ID_VIDEO_2">Carregando video 2...</div>
<div id="ID_VIDEO_3">Carregando video 3...</div>

<script type="text/javascript">
	GetThumbs();
</script>

se alguem conseguir melhorar minha bagunça :)

Arquivado

Upgrade em código JS para conectar na API do VIMEO

Recommended Posts

lulinha ô cara! 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

lulinha ô cara! 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

lulinha ô cara! 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

lulinha ô cara! 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

lulinha ô cara! 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

lulinha ô cara! 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

vicoluis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Não consigo carregar imagem do captcha no meu formulário

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Fóruns

Tempo Real

Informação importante