2

Não consegui achar o que eu queria, apenas coisas parecidas, eu até fiz um vídeo e postei no Youtube para vocês entenderem o que eu quero fazer, se alguém puder me ajudar eu agradeço, segue o vídeo abaixo:

https://www.youtube.com/watch?v=B35uf1onOEk

Eu quero que, ao colocar o link no campo de texto e clicar em enviar apareça um embed do YouTube com as informações igual o vídeo mostra, e, ao postar, se eu clicar nessa embed ela executa o vídeo, ou seja, exatamente igual eu gravei no vídeo. Se alguém puder me indicar um tutorial ou puder me explicar para mim poder entender e conseguir fazer isso.

3 Respostas 3

2

Acho que a solução do seu problema todo é usando a API do (Youtube API (v3)). Vou quebrar em dois itens a minha resposta. Mas não é exatamente a solução do que você quer, pois não usei a API a fundo para dizer exatamente quais métodos deve usar. Mas ela tem uma documentação muito extensa para ajudar a implementar o que você quer.

1) Para obter as informações do vídeo, extraia o id do vídeo da url (através de regex) e use a API de dados do Youtube (Youtube Data API). Acho que esse vídeo YouTube Data API v3: Accessing the description of a video using JavaScript deve ajudar um pouco. É com JavaScript, mas deve dar uma noção de quais métodos usar da API REST deles. Talvez tenha que fazer mais alguma coisa para pegar o thumbnail do vídeo.

2) A segunda parte é mais fácil, você tanto pode abrir a janela do youtube com a url que você ja tem. Ou poderá usar a API de Players (Players API), na qual permite que você coloque um Player embutido na sua página, com várias configurações do youtube via html.

Outra sugestão seria usar a API via JavaScript, devido a forma de interação, em vez de PHP, mas ambas as opções são possíveis.

0

primeiramente, obrigado por responder, dei uma olhada na API do YouTube mas não achei o que procurava apenas uns exemplos que tive dificuldade em entender. Então, eu entrei no código fonte do site do qual eu gravei o vídeo e vou postar os códigos que eu achei aqui para ver se você ou outra pessoa pode pode me ajudar a entendê-lo e botá-lo para funcionar:

Em um arquivo .js encontrei:

// Adiciona vídeo ao STREAM
root.delegate('#includeVideoStream','click',function(){

    var streamLink = getURL($("#stream-video").val());

    if(streamLink && !$('#stream-link-status').attr('value')){

        var video = $('#stream-video').val();

        $('#add-stream-image').parent().hide();

        $('#stream-description').append(video);

        $('#stream-video').val('');

        $('.formPublishVideo').hide();
        $('#cont-video-publish').hide();

        if(streamLink[0]=='YOUTUBE'){
            var ajx = new ajxQuery({
                'post' : '&videoID=' + streamLink[2],
                'url' : SYS_URL + 'youtube',
                'retorno' : 'json',
                'onCarregando' : function(){},
                'onRetorno' : function(json){
                    if(json[0]){

                        $('#stream-link-status').attr('value',1);
                        $('#stream-link').attr('value',streamLink[1]);
                        $('#stream-link-type').attr('value','YOUTUBE');
                        $('#stream-link-thumb').attr('value',json[2]);
                        $('#stream-link-title').attr('value',json[0]);
                        $('#stream-link-description').attr('value',json[1]);
                        $('#stream-link-embed').attr('value',json[3]);

                        $('#link-thumb').attr('src',json[2]);
                        $('#link-titulo').text(json[0]);
                        $('#link-description').text(json[1]);

                        $('#cont-stream-link').show();

                    }
                }
            });
            ajx.conectar();
        }
    }
})

Também encontrei em outro arquivo .js separado:

function getURL(text) {
var patternLink = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
var patternYoutube = /youtu(be.com|.b)(\/v\/|\/watch\\?v=|e\/|\/watch(.+)v=)(.{11})/;

var er = new RegExp(patternLink);
var arLink = er.exec(text);

if(arLink){
    var er = new RegExp(patternYoutube);
    var arYoutube = er.exec(arLink[0]);
    if(arYoutube){
        return [
        'YOUTUBE',
        arLink[0],
        arYoutube[4]
        ];
    }else{
        return [
        'LINK',
        arLink[0],
        null
        ];
    }
    return true;
}else{
    return false;
}

}

e:

/**************** START STREAM ********************/

function openVideo(newsID,param){

var obj = $("#item-"+newsID+" .link-thumb");

$(obj).html("");
$(obj).css("paddingBottom","10px");

switch(param[0]){
    case "YOUTUBE":
        $(obj).append("<iframe width='408' height='230' src='http://www.youtube.com/embed/"+param[1]+"?wmode=transparent' frameborder='0' allowfullscreen></iframe>");
        break;
}

}

function streamCapture(){

var streamLink = getURL($("#stream-text").val());

if(streamLink && !$('#stream-link-status').attr('value')){
    if(streamLink[0] == 'YOUTUBE'){

        var ajx = new ajxQuery({
            'post' : '&videoID=' + streamLink[2],
            'url' : SYS_URL + 'youtube',
            'retorno' : 'json',
            'onCarregando' : function(){
                $('#content-loading').show();
            },
            'onRetorno' : function(json){
                if(json[0]){
                    $('#stream-link-status').attr('value',1);
                    $('#stream-link').attr('value',streamLink[1]);
                    $('#stream-link-type').attr('value','YOUTUBE');
                    $('#stream-link-thumb').attr('value',json[2]);
                    $('#stream-link-title').attr('value',json[0]);
                    $('#stream-link-description').attr('value',json[1]);
                    $('#stream-link-embed').attr('value',json[3]);

                    $('#link-thumb').attr('src',json[2]);
                    $('#link-titulo').text(json[0]);
                    $('#link-description').text(json[1]);
                    $('#link').show();
                }

                $('#content-loading').hide();
            }
        });
        ajx.conectar();
    }else{
}
}

} function closeLink(){ $( '#stream-link-status,'+ '#stream-link,'+ '#stream-link-type,'+ '#stream-link-thumb,'+ '#stream-link-title,'+ '#stream-link-description,'+ '#stream-link-embed' ).attr("value",""); $('#link').slideUp(); $('#cont-addVideoPublish').show(); }

Como posso utilizar esses arquivos para fazer igual ao do vídeo? Obrigado.

2
  • A princípio, não recomendo usar código de outros sem autorização, e além disso, não é fácil usar código sem comentários. Acho que seria mais fácil começar do Zero, seguindo o tutorial de configuração de aplicativo e usar algum sdk para javascript. Conforme for fazendo poderia postar o código para ver o progresso. Olhando o requisito, você precisa seguir os passos para configurar sua aplicação usando os serviços do google. Após isso use o método videos/list da API para buscar tudo que você precisa: título, descrição e thumbnails do vídeo.
    – Wakim
    Commented 11/05/2014 às 16:48
  • Esse link (developers.google.com/youtube/v3/docs/videos/…) permite que você teste o uso da api. Preencha o campo part com o valor "snippet" e o id do vídeo que quiser. Na resposta verá todas as informações que você precisa.
    – Wakim
    Commented 11/05/2014 às 16:51
0

obrigado por responder.

Eu já estou conseguindo utilizar a API do YouTube. Ele gera exatamente o que eu quero, a thumbnail, o título e a descrição, porém, quando eu passo o mouse por cima da thumbnail eu queria que eu pudesse clicar nela e a mesma se expandir e eu poder visualizar o vídeo, assim como mostra o vídeo que eu postei...

Segue uma print do que eu já estou conseguindo:

inserir a descrição da imagem aqui

E os códigos que eu utilizo:

index.php

<div class="main">

<form class="pure-form" method="POST">
    <input type="url" name="url" placeholder="http://www.youtube.com/watch?v=xxxxxxx"><br />
    <center><input type="submit" value="Submit" class="pure-button pure-button-primary"></center>
</form>

<br />
<br />

<?php
if (isset($_POST['url'])):
    $url = $_POST['url'];

    // filter for valid url
    if(filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_QUERY_REQUIRED)):
        include 'youtubeapi.php';
        $youtube = youtube($url);

?>

    <div class="yt-div-igr">
        <div class="titulo">
            <p><?php echo $youtube->title ?></p>
        </div>

        <div class="thumbnail">
            <img src="<?php echo $youtube->thumbnail->sqDefault?>">
        </div>

        <div class="descricao">
            <p><?php echo $youtube->description ?></p>
        </div>
    </div>

    <?php endif?>
<?php endif?>

youtubeapi.php

<?php

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;

} ?>

Como eu já disse, quero que ao passar o mouse em cima da thumbnail e clicar ela se expanda e eu possa visualizar o vídeo assim como eu mostro em: https://www.youtube.com/watch?v=B35uf1onOEk

1
  • A partir de agora, é preciso usar a API de Players JavaScript pra exibir o streaming do vídeo. Tem duas opções: por iframe (developers.google.com/youtube/iframe_api_reference?hl=pt-br) e por swf (developers.google.com/youtube/js_api_reference?hl=pt-br). A princípio você precisa fazer bind do evento de click no html da thumbnail, e chamar um dos métodos que carregam o vídeo passando o ID do vídeo (p.e: cueVideoById, loadVideoById, etc...). 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.
    – Wakim
    Commented 11/05/2014 às 19:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .