Mostrar a fonte do vídeo do Youtube na tag de vídeo HTML5?

116

Estou tentando colocar uma fonte de vídeo do YouTube na <video>tag HTML5 , mas não parece funcionar. Depois de pesquisar no Google, descobri que HTML5 não oferece suporte a URLs de vídeo do YouTube como fonte.

Você pode usar HTML5 para incorporar vídeos do YouTube? Se não, existe alguma solução alternativa?

sri
fonte
1
Uma solução IFrame conforme fornecida abaixo em stackoverflow.com/questions/5157377/… deve ser suficiente como uma solução alternativa.
S Meaden,

Respostas:

15

Etapa 1: adicione &html5=Trueao seu url favorito do YouTube

Etapa 2: Encontre a <video/>tag na fonte

Etapa 3: Adicionar controls="controls"à tag de vídeo:<video controls="controls"..../>

Exemplo:

<video controls="controls" 
       class="video-stream" 
       x-webkit-airplay="allow" 
       data-youtube-id="N9oxmRT2YWw" 
       src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&amp;itag=43&amp;ipbits=0&amp;signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&amp;sver=3&amp;ratebypass=yes&amp;expire=1300417200&amp;key=yt1&amp;ip=0.0.0.0&amp;id=37da319914f6616c"></video>

Observe que parece algumas expirecoisas. Não sei por quanto tempo a srccorda vai funcionar.

Ainda me testando.

Editar (28 de julho de 2011) : Observe que este vídeo src é específico para o navegador que você usa para recuperar o código-fonte da página. Acho que o Youtube gera esse HTML dinamicamente (pelo menos atualmente) então em testes se eu copiar no Firefox isso funciona no Firefox, mas não no Chrome, por exemplo.

Simon Flack
fonte
77
A expiração e o fato de que só funciona em um navegador específico tornam esta solução bastante inútil.
pjv
1
É capaz de reproduzir TODOS os vídeos do youtube?
Raj Pawan Gumdal
2
O YouTube poderia, teoricamente, alterar os URLs de armazenamento subjacentes para todos os seus vídeos, se quisessem a qualquer momento. O URL fornecido no srcatributo acima provavelmente não funcionará por muito tempo.
Chris Peters,
1
Sim, informações úteis, mas parecem uma má ideia. O YouTube pode decidir fechar o acesso ao link de vídeo direto a qualquer momento.
Oliver Moran
36

Esta resposta não funciona mais, mas estou procurando uma solução.

A partir de . 24/02/2015. existe um site (youtubeinmp4) que permite que você baixe vídeos do youtube .mp4 format, você pode explorar isso (com algum JavaScript) para se safar incorporando vídeos do youtube em <video>tags. Aqui está uma demonstração disso em ação.

Prós

  • Bastante fácil de implementar .
  • Resposta do servidor bastante rápida, na verdade (não é preciso muito para recuperar os vídeos).
  • Abstração (a solução aceita, mesmo que funcionasse corretamente, só seria aplicável se você soubesse de antemão quais vídeos iria reproduzir, funciona para qualquer url inserida pelo usuário).

Contras

  • Obviamente, depende dos youtubeinmp4.comservidores e da forma como fornecem um link de download (que pode ser passado como <video>fonte), portanto, essa resposta pode não ser válida no futuro.

  • Você não pode escolher a qualidade do vídeo.


JavaScript (depois load)

videos = document.querySelectorAll("video");
for (var i = 0, l = videos.length; i < l; i++) {
    var video = videos[i];
    var src = video.src || (function () {
        var sources = video.querySelectorAll("source");
        for (var j = 0, sl = sources.length; j < sl; j++) {
            var source = sources[j];
            var type = source.type;
            var isMp4 = type.indexOf("mp4") != -1;
            if (isMp4) return source.src;
        }
        return null;
    })();
    if (src) {
        var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
        if (isYoutube) {
            var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
            id = (id.length > 1) ? id.splice(1) : id;
            id = id.toString();
            var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
            video.src = mp4url + id;
        }
    }
}

Uso (completo)

<video controls="true">
    <source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>

Formato de vídeo padrão.

Uso (Mini)

<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>

Um pouco menos comum, mas bem menor, usando o url encurtado youtu.becomo o srcatributo diretamente na <video>tag.

Espero que ajude! :)

Indefinido
fonte
Boa função e funciona no Mozilla e Chrome, mas como definir a largura e a altura do vídeo se <video> tiver 100% de largura e 200px de altura.
Anmol Ratan Mohla
Eu implementei essa solução, mas 2 dias depois, o YT a bloqueou. Não funciona mais. :(
apires
isso não funciona mais, infelizmente. Costumava funcionar muito bem. Espero que haja outra solução para isso!
Chamilyan
19

A <video>tag deve ser carregada em um vídeo de formato compatível (que pode variar de acordo com o navegador).

Os links incorporados do YouTube não são apenas vídeos, eles são normalmente páginas da web que contêm lógica para detectar o que seu usuário suporta e como eles podem reproduzir o vídeo do YouTube, usando HTML5 ou flash ou algum outro plug-in com base no que está disponível no PC do usuário. É por isso que você está tendo dificuldade em usar a tag de vídeo com vídeos do youtube.

O YouTube oferece uma API de desenvolvedor para incorporar um vídeo do YouTube em sua página.

Fiz um JSFiddle como exemplo ao vivo: http://jsfiddle.net/zub16fgt/

E você pode ler mais sobre a API do YouTube aqui: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

O código também pode ser encontrado abaixo

Em seu HTML:

<div id="player"></div>

Em seu Javascript:

var onPlayerReady = function(event) {
    event.target.playVideo();  
};

// The first argument of YT.Player is an HTML element ID. 
// YouTube API will replace my <div id="player"> tag 
// with an iframe containing the youtube video.

var player = new YT.Player('player', {
    height: 320,
    width: 400,
    videoId : '6Dc1C77nra4',
    events : {
        'onReady' : onPlayerReady
    }
});
Norman Breau
fonte
Recentemente, tive este problema: A tela cheia não é mais compatível com o iPad! Seus exemplos do jsfiddle são perfeitos para ilustrar: no pc funciona, no iPad não. ..Acho que deveria fazer uma nova pergunta sobre isso, mas alguém aqui talvez possa comentar?
Snorvarg
1
@Snorvarg Minha resposta deve funcionar em qualquer navegador compatível com HTML5, o qual, desde que você esteja executando uma versão bastante recente do iOS (10+) em seu iPad, deve funcionar. Se você não precisa controlar programaticamente o vídeo, pode tentar usar a API de incorporação de iframe simples. Você pode encontrar um exemplo aqui developers.google.com/youtube/iframe_api_reference#Examples ou ver a resposta de vinayvasyani. Se você ainda tiver um problema, eu faria uma nova pergunta usando as diretrizes "Como fazer uma boa pergunta" encontradas em stackoverflow.com/help/how-to-ask .
Norman Breau,
@Snorvarg Me deparei com este productforums.google.com/forum/#!topic/youtube/q7cAnPlN_-Y , um problema semelhante ocorrendo no Firefox e foi resolvido porque eles precisavam solicitar permissões de tela inteira. Portanto, estou disposto a apostar que é por isso que a tela cheia não está funcionando no seu iPad, que infelizmente o iOS Safari não parece suportar. Uma solução alternativa é adicionar seu próprio botão de tela inteira e apenas redimensionar o player iframe para a largura / altura da tela.
Norman Breau,
1
Obrigado por suas dicas e links. Adicionei uma pergunta há alguns dias, aqui: stackoverflow.com/questions/49650040/… Mas depois de um tempo, decidi fazer um botão de tela inteira sozinho, conforme você propôs, e funciona bem.
Snorvarg,
Muito bom, no entanto, encontrei o erro "TypeError: YT.Player não é um construtor", conforme descrito aqui: stackoverflow.com/questions/52062169/… . Como a (única) resposta indica, isso resulta do carregamento assíncrono do script e da API ainda não estar pronta ao ser chamada. Isso pode ser evitado implementando a onYouTubeIframeAPIReadyfunção (e colocando o último bloco de código do código acima dentro dela).
jakob.j
1

A resposta mais fácil é dada por W3schools. https://www.w3schools.com/html/html_youtube.asp

  1. Envie seu vídeo para o Youtube
  2. Observe o ID do vídeo
  3. Agora escreva este código em seu HTML5.
<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>
Sagnik Majumder
fonte
-3

que tal fazer do jeito hooktube faz? eles na verdade não usam o URL do vídeo para o elemento html5, mas o URL do redirecionador de vídeo do google que chama esse vídeo. veja aqui como eles apresentam alguns vídeos aleatórios despacito ...

<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&amp;mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>

o código é para a seguinte página de vídeo https://hooktube.com/watch?v=72UO0v5ESUo

o youtube para mp3, por outro lado, se tornou um monstro extremamente monetizado que retorna agora download.html em metade das solicitações de download de vídeo ... irritante ...

os 2 links nesta resposta são para minhas experiências pessoais com ambos os recursos. como o hooktube é bom e novo e na verdade ajuda a evitar censura e restrições geográficas .. dê uma olhada, é muito legal. e youtubeinmp4 é um monstro popup agora conhecido como ConvertInMp4 ...

Sergey Kireyev
fonte
-6

Com a nova tag iframe incorporada ao seu site, o código detectará automaticamente se você está usando um navegador compatível com HTML5 ou não.

O código iframe para incorporar vídeos do YouTube é o seguinte, basta copiar o ID do vídeo e substituir no código abaixo:

<iframe type="text/html" 
    width="640" 
    height="385" 
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>
vinayvasyani
fonte
23
"Nova" iframetag? iframeexiste há anos ...
Zearin
11
Esta não é uma solução para a resposta, ela afirma claramente a tag de vídeo e não iframe ...
TGarrett
7
Talvez o OP simplesmente não soubesse da existência da iframetag e foi por isso que perguntou diretamente sobre a videotag. Caso contrário, ele não teria perguntado se o HTML5 (genericamente) suporta vídeos do Youtube, mas teria restringido a pergunta à videotag. Ele até perguntou "existe alguma solução alternativa para isso?" em sua última frase, então esta resposta é perfeitamente válida.
Daniel Muñoz Parsapoormoghadam
1
Para incorporar vídeos do youtube.com em meu blog blogger.com, iframe é a única solução conveniente. Além disso, o código de incorporação gerado pelo youtube.com é uma tag iframe. Além disso, w3schools.com recomenda iframes: http://www.w3schools.com/html/html_youtube.asp . Onde a tag de vídeo não é mencionada.
noobninja de
1
Caso alguém esteja curioso ... O problema é que usar uma tag de vídeo não é a abordagem adequada para vídeos do YouTube porque os URLs públicos para incorporar vídeos do YouTube não são um recurso de mídia real. É por isso que há pessoas sugerindo o uso de iframes. Tentar usar uma tag de vídeo significa que você usará URLs privados que podem mudar no futuro. É como tentar acessar um membro privado em uma linguagem orientada a objetos. Você pode ver a documentação oficial do YouTube aqui developers.google.com/youtube/iframe_api_reference#Examples
Norman Breau