Mostrare la sorgente video di Youtube nel tag video HTML5?

Sto cercando di inserire una sorgente video di YouTube nel <video>tag HTML5 , ma non sembra funzionare. Dopo alcune ricerche su Google, ho scoperto che HTML5 non supporta gli URL dei video di YouTube come fonte.

Puoi usare HTML5 per incorporare video di YouTube? In caso contrario, esiste una soluzione alternativa?

Passaggio 1: aggiungi &html5=Trueal tuo URL di YouTube preferito

Passaggio 2: trova il <video/>tag nella sorgente

Passaggio 3: aggiungi controls="controls"al tag video:<video controls="controls"..../>

Esempio:

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

Nota che sembra che ci siano alcune expirecose. Non so per quanto tempo funzionerà la srcstringa.

Sto ancora mettendo alla prova me stesso.

Modifica (28 luglio 2011) : nota che questo video src è specifico per il browser che utilizzi per recuperare l'origine della pagina. Penso che Youtube generi questo HTML dinamicamente (almeno attualmente) quindi nei test se copio in Firefox funziona in Firefox, ma non in Chrome, per esempio.

Questa risposta non funziona più, ma sto cercando una soluzione.

A partire da . 2015/02/24. c'è un sito web (youtubeinmp4) che ti permette di scaricare i video di youtube .mp4 format, puoi sfruttarlo (con un po 'di JavaScript) per farla franca incorporando i video di youtube nei <video>tag. Ecco una demo di questo in azione.

Professionisti

• Abbastanza facile da implementare .
• Risposta del server abbastanza veloce in realtà (non ci vuole molto per recuperare i video).
• Astrazione (la soluzione accettata, anche se funzionasse correttamente, sarebbe applicabile solo se sapessi in anticipo quali video stai per riprodurre, funziona per qualsiasi URL inserito dall'utente).

Contro

• Ovviamente dipende dai youtubeinmp4.comserver e dal loro modo di fornire un link per il download (che può essere passato come <video>fonte), quindi questa risposta potrebbe non essere valida in futuro.

• Non puoi scegliere la qualità del video.

JavaScript (dopo 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;
        }
    }
}

Utilizzo (completo)

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

Formato video standard.

Utilizzo (Mini)

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

Un po 'meno comune ma piuttosto più piccolo, utilizzando l'URL abbreviato youtu.become srcattributo direttamente nel <video>tag.

Spero che sia d'aiuto! :)

Il <video>tag è pensato per essere caricato in un video di un formato supportato (che può variare in base al browser).

I link incorporati di YouTube non sono solo video, sono tipicamente pagine web che contengono la logica per rilevare ciò che il tuo utente supporta e come possono riprodurre il video di YouTube, utilizzando HTML5, flash o qualche altro plug-in in base a ciò che è disponibile sul PC dell'utente. Questo è il motivo per cui hai difficoltà a utilizzare il tag video con i video di YouTube.

YouTube offre un'API per sviluppatori per incorporare un video di YouTube nella tua pagina.

Ho creato un JSFiddle come esempio dal vivo: http://jsfiddle.net/zub16fgt/

E puoi leggere ulteriori informazioni sull'API di YouTube qui: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

Il codice può essere trovato anche di seguito

Nel tuo HTML:

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

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

La risposta più semplice è data da W3schools. https://www.w3schools.com/html/html_youtube.asp

1. Carica il tuo video su Youtube
2. Prendi nota dell'ID video
3. Ora scrivi questo codice nel tuo HTML5.

<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>

che ne dici di farlo nel modo in cui lo fa hooktube ? in realtà non utilizzano l'URL del video per l'elemento html5, ma l'URL del reindirizzamento video di Google che richiama quel video. guarda qui come presentano alcuni video casuali 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>

il codice è per la seguente pagina video https://hooktube.com/watch?v=72UO0v5ESUo

youtube in mp3 d'altra parte si è trasformato in mostro estremamente monetizzato che ora ritorna download.html su metà delle richieste di download di video ... fastidioso ...

i 2 link in questa risposta sono alle mie esperienze personali con entrambe le risorse. come hooktube è bello e fresco e in realtà aiuta a evitare la censura e le restrizioni geografiche .. dai un'occhiata, è piuttosto interessante. e youtubeinmp4 è un mostro popup ora noto come ConvertInMp4 ...

Con il nuovo tag iframe incorporato nel tuo sito web, il codice rileverà automaticamente se stai utilizzando un browser che supporta HTML5 o meno.

Il codice iframe per incorporare i video di YouTube è il seguente, copia semplicemente l'ID video e sostituiscilo nel codice seguente:

<iframe type="text/html" 
    width="640" 
    height="385" 
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>