Ir ao conteúdo
  • Cadastre-se

Embed de vídeo do Youtube via url


Posts recomendados

Olá pessoal, preciso da ajuda de vocês para tirar uma dúvida...


A minha dúvida é, como eu posso fazer um sistema que no caso seria para fazer upload de um vídeo do youtube a partir da sua URL, seria parecido com o facebook, que quando você vai postar algo coloca a URL do vídeo lá e ele carrega automaticamente e então você posta, etc...


 


Só que seria mais simples, eu queria que houvesse um campo text no qual eu colocaria a URL do vídeo e um submit que executaria a função de carregar o vídeo, eu sei que é possível pois já vi em um site...


 


Se alguém puder me dizer como posso fazer eu agradeço, não tenho a mínima ideia de como é isso...


 


Muito obrigado, segue a imagem de exemplo:


 


nqczsl.jpg


 


Então, após colocar a URL do vídeo no campo de texto e clicar em enviar o vídeo ia carregar automaticamente dentro da textarea em forma de embed eu acho... Obrigado novamente.


 


Gravei um vídeozinho e postei no YouTube para vocês verem o que eu quero...


 



 


Muito obrigado biggrin.png.


Link para o comentário
Compartilhar em outros sites

Olá dif, obrigado por responder.

Então, eu já li bastante sobre a API do YouTube, porém queria saber como fazer dessa maneira como mostra o vídeo, pois eu já consegui fazer pra buscar pela url e inclusiva mostrar a thumbnail, título e descrição, mas não estão do jeito que eu quero e eu fiz também apenas para testes. Eu sei que o que foi feito no vídeo foi algo que o YouTube fornece basicamente pronto, basta você integrar em seu sistema, mas não encontrei esses códigos até agora, apenas exemplos que não me agradaram. Eu preciso muito fazer algo igual isso do vídeo, se você souber algo e puder me ajudar eu agradeço. Muito obrigado.

Link para o comentário
Compartilhar em outros sites

  • Moderador

Então..  Lendo a API e fazendo meia duzia de pesquisa no google... é fácil achar o que você quer fazer.. claro que não terá nada pronto.. você vai ter que entender e implementar... ou seja.. juntar todos os conhecimentos e fazer seu sistema de postagem.

 

Referencias:

 

 - Pegando as todas informações do video com php neste, preste a atenção na variável: $video_id,  nela é que conterá o código do vídeo.

 - Incorporando um video do youtube.

 

Agora acrescente, ajax em jquery para fazer a requisição assíncrona do video... e depois postar.

Eu já comprovei que funciona os códigos das referências. Agora tente fazer, e poste uma tentativa!

 

Veja na imagem no anexo.. os dados de um vídeo pegos com php( sim fiz um exemplo só para mostarr).. Note que não estilizei nada.. afinal são só as informações. Não postarei nenhum código até que você poste alguma coisa!

 

Abraço  e no aguardo

 

post-386885-0-13380400-1399806635_thumb.

Link para o comentário
Compartilhar em outros sites

Olá dif. Então, primeiramente eu gostaria de dizer que não estou pedindo nada pronto, apenas uma luz mesmo só recorro a fóruns quando realmente estou com muita dificuldade em determinado assunto. Eu ja havia conseguido, a partir da API do YouTube criar um exemplo que, ao colocar um URL do YouTube ele retornar uma thumbnail, titulo e descrição do vídeo em questão, porém minha dúvida em si mesmo é: nesse caso, essa thumbnail está como uma imagem qualquer e eu queria que, ao clicar nessa thumbnail o vídeo se expandisse e eu pudesse visualizar o mesmo assim como eu mostro no vídeo. Segue uma print do que eu já havia conseguido...:

 

110gbyh.jpg

 

Obrigado.

Link para o comentário
Compartilhar em outros sites

  • Moderador

Então...  veja no post #4 o segundo link. você precisa  usar ajax para fazer a requisição.. e alterar o div do thumbnail e descrição para o video em si.

 

Dica:

 

crie um arquivo php que pega as informações ( você já fez)

crie um outro arquivo php com o código do segundo link...

atraves do ajax vocÊ faz uma requisição a este segundo arquivo .... e altera o conteúdo do div.. para o video.

Link para o comentário
Compartilhar em outros sites

Boas notícias, já consegui estilizar da minha maneira:

 

90t8br.jpg

 

Você poderia explicar melhor o que seria essa requisição em ajax? Seria um evento do qual, ao clicar na thumbnail substituirá tal div pela embed do vídeo em si?

Obrigado.

Link para o comentário
Compartilhar em outros sites

  • Moderador

O ajax, é uma técnica javascript  que permite fazer requisições assíncronas.. onde elimina a necessidade de recarregar a página a cada requisição.

 

O jQuery possui algumas funções que facilitam muito. exemplo:

var input = $('.video').val();$.ajax({  url: 'arquivo.php',  dataType: 'html',  data: {video: input},  success: function(data){    $('.seu-div-que-tera-o-video').html(data); },  error: function(data){     $('.error').html(data);} });

Dê  uma estudadinha nesta função $.ajax()  e seus parâmetros. 

Link para o comentário
Compartilhar em outros sites

Essa função que você fez como exemplo, seria a que eu teria que utilizar no meu código?

Vou dar uma estudadinha sim no $.ajax(). Estou muito animado pois está realmente ficando da maneira que eu gosto, hehe.

Em outro fórum uma pessoa fez um comentário em meu post " Recomendo também trocar a versão da API, pelo código parece que esta usando a v2 (que vai ser depreciada em breve) em vez da v3. ".

 

Como eu posso adaptar para essa versão v3 da API do YouTube? Obrigado novamente.

 

Código separado que se refere à API do YouTube:

<?php/** * Youtube *  * @param str youtube video url * @[member=Return] object || void * @[member=copyright] w3bees.com */function youtube($url){	# get video id from url	$urlQ = parse_url( $url, PHP_URL_QUERY );	parse_str( $urlQ, $query );	# YouTube api v2 url	$apiURL = 'http://gdata.youtube.com/feeds/api/videos/'. $query['v'] .'?v=2&alt=jsonc';	# curl options	$options = array(		CURLOPT_URL	=> $apiURL,		CURLOPT_RETURNTRANSFER => true,		CURLOPT_BINARYTRANSFER => true,		CURLOPT_SSL_VERIFYPEER => false,		CURLOPT_TIMEOUT => 5 );	# connect api server through cURL	$ch = curl_init();	curl_setopt_array($ch, $options);	# execute cURL	$json = curl_exec($ch) or die( curl_error($ch) );	# close cURL connect	curl_close($ch);	# decode json encoded data	if ($data = json_decode($json))		return (object) $data->data;}/*# YouTube video url$url = 'www.youtube.com/watch?v=q4Ob7OSLUyY';$youtube = youtube($url);# title$youtube->title;# duration in seconds$youtube->duration;#video description$youtube->description;# thumbnail url High Quality$youtube->thumbnail->hqDefault;# thumbnail url Small Quality$youtube->thumbnail->sqDefault;# video rating out of five$youtube->rating;# total likes$youtube->likeCount;# video category$youtube->category;# total view$youtube->viewCount;# time upload time$youtube->uploaded;# morevar_dump($youtube);*/?>
Link para o comentário
Compartilhar em outros sites

Na realidade eu queria que você explicasse o código que você passou se não for pedir muito... Pois sou novato em Ajax e gostaria de entender o que você fez, inclusive se esse exemplo se aplica ao meu problema... E sobre a API, como posso atualizar sem tem que refazer todo o código?

Link para o comentário
Compartilhar em outros sites

  • Moderador

Vamos lá.


 


Linha 1, atribui a uma variável o valor do input


Linhas 2 e 18, função ajax


Linhas 3 a 5, parâmetros da função


Linhas 6 a 8, função de retorno caso bem sucedido


Linhas 9 a 11, função de retorno caso mal sucedido


 


Agora vem a pergunta, serve para o problema? Sim.


 


Pense da seguinte forma..


 


Quando você cola um link do youtube nesse input.. e aperta no botão enviar.. o script jquery pega o valor digitado no campo input e armazena em uma variável.


 


Através do parametro url, o arquivo php que contem a função de captura dos dados do video é chamado.


No dataType, diz que o tipo de dado é HTML…


no parametro data, você coloca entre chaves, o name do campo input e a variável.


 


A função success é chamada, quando  a requisição for bem sucedida.. o data desta função, seria os echos  que no codigo php retorna.


 


Agora juntando tudo isso...  para fazer o que quer..  você pode criar o container vazio para o video e esconder. assim que colocar o endereco do video e enviar...  fará a requisição e vai inserir os dados resgatados pela função php que você postou. 


Obviamente.. para ter um link na descricao do video ou no proprio thumb do video.. você precisa adicionar no echo no seu php.


Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...