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

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?

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.

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! :)

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
    }
});

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>

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 ...

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>