2013-12-15 10 views
14

rapido esempio del codice che sto usando in questo momento di creare il mio YouTube iframe:È possibile nascondere il grande pulsante di riproduzione rosso di YouTube con un parametro?

player = new YT.Player('[PLAYER ID]', { 
    height: '300', 
    width: '480', 
    videoId: '[VIDEO ID]', 
    playerVars: { 'controls': 0, 'showinfo': 0 }, 
}); 

E 'tutto grande lavoro finora, sta caricando il video benissimo senza controlli o la striscia di informazioni e sono' manualmente 'riproducendo il video usando javascript.

Il problema è che ora non è necessario il pulsante rosso "play" che viene momentaneamente visualizzato all'avvio del video.

enter image description here

C'è un modo per sbarazzarsi di questo? Ho esaminato la documentazione e non riesco a trovare un parametro adatto che mi consenta di nasconderlo.

risposta

0

Ogni video di YouTube ha 4 immagini generate. Sono formattati in modo prevedibile come segue:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg 

Il primo nell'elenco è un'immagine a dimensione intera e altri sono immagini in miniatura. (. Vale a dire uno dei 1.jpg, 2.jpg, 3.jpg) L'immagine di default miniatura è:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg 

Per la versione ad alta qualità della miniatura utilizzare un URL simile a questo:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg 

C'è anche una versione qualità media della miniatura, utilizzando un URL simile al HQ:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg 

per la versione a definizione standard della miniatura, utilizzare un URL simile a questo:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg 

Per la versione massima risoluzione della miniatura utilizzare un URL simile a questo:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg 

tutti gli URL di cui sopra sono disponibili su https troppo. Basta cambiare http a https in uno qualsiasi degli URL di cui sopra. Inoltre, l'hostname leggermente più corto i3.ytimg.com funziona al posto di img.youtube.com negli URL di esempio sopra.

In alternativa, è possibile utilizzare YouTube Data API (v3) o il precedente YouTube API v2.0 per ottenere immagini in miniatura.

+2

Apprezzo lo sforzo compiuto in questa risposta, ma il problema è che le immagini non sono volute. Preferirei liberarmene di loro. –

+0

I due parametri che ho trovato utili sono: showinfo = 0 controlli = 0 autohide = 1 'showinfo = 0 'si assicura il video non viene visualizzato il titolo sulla parte superiore della cornice video. 'controls = 0' nasconde la barra in basso con il pulsante play, volume, ecc.' autohide = 1' nasconde i controlli fino a passare il mouse sopra di essi, che è probabilmente il più utile. Tutti i documenti ufficiali sono [qui] (https://developers.google.com/youtube/player_parameters). –

+2

Conosco amico, lo apprezzo, ma ci ho già provato; quei parametri sono già in atto. –

4

Non l'ho trovato possibile. Quindi l'unico modo per nascondere il pulsante Riproduci è posizionare l'immagine del video sopra il video che può essere recuperato da youtube come segue. Ogni video di YouTube ha 4 immagini generate. Essi sono prevedibilmente formattati come segue:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg 

Ma una volta che si aggiunge la sovrapposizione, cliccando sullo schermo al posto di controllo non giocherà il video, per fare questo aggiungere il seguente jQuery, che riproduce il video

jQuery('#overlay').click(function(){ 
    jQuery(this).hide(); 
    jQuery('#youtube_id').get(0).playVideo(); 
}); 
+4

Anche questo sarebbe contrario ai termini di servizio, poiché non puoi sovrapporre nulla sul video da solo. – jlmcdonald

+0

Questo non è vero. Il grande pulsante di ripetizione rosso può essere eliminato, come mostrato in [jwplayer.js] (https://support.jwplayer.com/customer/portal/articles/1406725-youtube-video-embed) e [video.js] (https://static.bini.io/cus-videos/) Wrapper di YouTube. Entrambe queste popolari librerie javascript si basano sull'API iFrame di YouTube per gli incorporamenti di YouTube. Quindi non penso che usino della magia nera. – stillenat

+0

@stillenat 'video.js' per esempio usa" magia nera ". Semplicemente recupera una delle immagini di anteprima standard e inserisce una tale sovrapposizione nel DOM. Inserisce il video di YouTube nel DOM solo dopo aver premuto Play e anche in questo caso non utilizza l'iframe di YouTube. – fritzmg

Problemi correlati