Come riprodurre video di YouTube tramite tag video HTML5

Question

Questo codice funziona per un momento ma penso che i collegamenti cambino, perché il giorno successivo non viene trovato?
il video riprodotto sotto Firefox/Chrome/Opera ... come rendere il tag video riprodurre questo video in modo permanente ?!

<video width="480" height="270" controls="controls" style="color:green;"> 
    <source src="youtubelink" type="video/mp4"> 
    <source src="youtubelink" type="video/ogg"> 
    <source src="youtubelink" type="video/webm"> 
Your browser does not support the video tag. 
</video> 

Answer 1

Non c'è davvero un modo affidabile per riprodurre effettivamente un video di YouTube all'interno di un vero tag video. YouTube non vuole che tu lo faccia, ed è probabilmente contro i loro TOS. In ogni caso, quell'URL probabilmente cambierà regolarmente, sia che YT modifichi la propria infrastruttura sia che facciano di tutto per impedire alle persone di accedere direttamente ai file video.

Tuttavia, sono disponibili alcuni passaggi per poter eseguire praticamente tutto ciò che si potrebbe fare se si utilizza il tag video. Per iniziare, puoi aggiungere l'hint "html5 = 1" all'embro, il quale indicherà a YouTube di utilizzare video html5 anziché Flash (di solito è conforme, ma non sempre). Il video sarà in un iframe, ma puoi applicare tutti i consueti trucchi CSS a quell'iframe: opacità, trasformazioni, ecc.

Se stai utilizzando l'API di YouTube, aggiungi html5: 1 allo playerVars. Se si sta solo facendo un embed iframe dritto, inserirlo alla stringa di query come questa: http://www.youtube.com/embed/okqEVeNqBhc?html5=1

Ora, se si vuole fare un passo avanti, Popcorn.js ora ha un ingegnoso wrapper object per l'API di YouTube che farà un YouTube (ne hanno uno anche per Vimeo) il video si comporta come un HTMLVideoElement, con la maggior parte delle stesse proprietà, metodi ed eventi. Non è perfetto, ma è abbastanza buono.

Nota: la fonte ufficiale per tale file è sul repository mozilla/popcorn-js, ma this one è attualmente in anticipo con correzioni di errori e funzionalità. È necessario includere l'ultima versione di Popcorn.js e wrappers/common/popcorn._MediaElementProto.js da tale repo. Assicurati di aggiungere &html5=1 all'URL YT quando imposti lo src.

Le differenze che noterete sono:

• Anche con l'involucro, il video API HTML5 solo esegue un po 'meglio di API YT. ad esempio, rapporti più reattivi e migliori del buffering.

• Non è possibile eliminare l'icona di YouTube nell'angolo in basso a destra che appare in pausa o passaggio mouse.

• Non è possibile impedire a YouTube di mostrare annunci.

• Non è possibile accedere ai contenuti video/audio per cose come l'API audio e il disegno canvas/webgl. Ma non è possibile farlo comunque a causa di restrizioni di origine incrociata.