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

A partir de . 2015 / 02 / 24 .Há um website (youtubeinmp4) Isso permite-lhe baixar os vídeos do youtube em .mp4 format, pode explorar isto (com algum JavaScript) para se safar com a incorporação de vídeos do youtube nas marcas <video>. Aqui está um demonstração disto em acção.

Prós

• razoavelmente fácil de implementar.
Muito bem. resposta rápida do servidor na verdade (não é preciso muito para recuperar os vídeos).
• abstracção (a solução aceite, mesmo que funcionasse correctamente, só seria aplicável se soubesse de antemão quais os vídeos que ia Reproduzir, isto funciona para qualquer url intransigente do utilizador).

Cons

• Obviamente depende dos servidores youtubeinmp4.com e sua forma de fornecer um link de download( que pode ser passado como uma fonte <video>), de modo que este a resposta pode não ser válida no futuro.

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

JavaScript (após 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 Standart.

Utilização (Mini)

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

Um pouco menos comum, mas bastante menor, usando o url encurtado youtube.be e o atributo src directamente na marca <video>.

A marca <video> destina-se a carregar num vídeo de um formato suportado (que pode diferir Por navegador).

As ligações embed do YouTube não são apenas vídeos, são tipicamente páginas web que contêm lógica para detectar o que o seu utilizador suporta e como eles podem reproduzir o vídeo do youtube, usando HTML5, ou flash, ou algum outro plugin baseado no que está disponível no PC dos utilizadores. É por isso que você está tendo um momento difícil usando a tag de vídeo com vídeos do youtube.

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

O código também pode ser encontrado abaixo

No seu HTML:

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

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

Http://mediaelementjs.com/examples/?name=youtube

O exemplo acima mostra usando um vídeo do YouTube com uma etiqueta {[[0]}, mas também tem um recurso para Flash para navegadores que não o suportam.

Com a nova marca iframe incorporada no seu website, o código irá detectar automaticamente se está a usar um navegador que suporta o HTML5 ou não.

O código iframe para incorporar vídeos no 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>

Passos a seguir:

Abre o vídeo do Youtube. Clique com o botão direito no vídeo.
1. clica em "Copy Embed Code". (It will auto copy HTML Code)
2. cole - o no seu próprio HTML.

<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

Youtube to mp3 on the other hand has turned into extremely monetized monster that returns now download.galeria em metade dos pedidos de download de vídeo... irritante...

Os 2 links nesta resposta são para as minhas experiências pessoais com ambos os recursos. como hooktube é agradável e fresco e realmente ajuda a evitar a censura e restrições geológicas.. olha, é muito fixe. e o youtubeinmp4 é um monstro popup agora conhecido como ConvertInMp4...

<iframe allowfullscreen="true"
         allowscriptaccess="always"
         frameborder="0"
         height="100%"
         width="100%"
         scrolling="no"
         src="//www.youtube.com/embed/VIDEO_ID">
</iframe>