Mostrar a fonte de vídeo do Youtube na etiqueta de vídeo HTML5?
8 answers
Passo 1: adicionar &html5=True
ao seu url favorito do youtube
Passo 2: Procurar <video/>
marca na fonte
Passo 3: Adicionar controls="controls"
à marca 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&itag=43&ipbits=0&signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&sver=3&ratebypass=yes&expire=1300417200&key=yt1&ip=0.0.0.0&id=37da319914f6616c"></video>
Note que parece haver algumas coisas. Não sei quanto tempo o fio vai funcionar.
Ainda estou a testar-me.
editar (julho 28, 2011): Note que este src de vídeo é específico para o navegador que você usa para recuperar a fonte da página. Acho que o Youtube gera isto. HTML dinamicamente (pelo menos Atualmente) assim em testes se eu copiar no Firefox isso funciona no Firefox, mas não no Chrome, por exemplo.
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.
O YouTube oferece um programador API para inserir um vídeo do youtube na sua página.Fiz um JSFiddle como exemplo 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_StartedO 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.
- clica em "Copy Embed Code". (It will auto copy
HTML Code
) - cole - o no seu próprio
HTML
.
<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&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>