Fai clic sull’immagine del poster riprodotta dal video HTML5?

Ho un video HTML5 con un attributo poster. Mi piacerebbe in qualche modo configurarlo in modo da poter cliccare ovunque sull’elemento del video (l’area dell’immagine del poster) e si accenderà l’evento di riproduzione e inizierà il video? Mi sento come se fosse una pratica abbastanza normale, ma non riesco a trovare un modo per farlo senza flash. Qualsiasi aiuto sarebbe molto apprezzato.

Questo funziona per me Andrew.

Nella tua testa html aggiungi questo piccolo pezzo di js:

var video = document.getElementById('video'); video.addEventListener('click',function(){ video.play(); },false); 

Oppure aggiungi semplicemente un attributo onlick direttamente al tuo elemento html:

  

Inserito anche qui, ma questo vale anche per questo thread.

Ho avuto innumerevoli problemi, ma alla fine ho trovato una soluzione che funziona.

Fondamentalmente il codice sottostante aggiunge un gestore di clic al video ma ignora tutti i clic nella parte inferiore (0,82 è arbitrario ma sembra funzionare su tutte le dimensioni).

 $("video").click(function(e){ // handle click if not Firefox (Firefox supports this feature natively) if (typeof InstallTrigger === 'undefined') { // get click position var clickY = (e.pageY - $(this).offset().top); var height = parseFloat( $(this).height() ); // avoids interference with controls if (clickY > 0.82*height) return; // toggles play / pause this.paused ? this.play() : this.pause(); } }); 

L’uso dell’attributo poster non altera il comportamento. Mostra solo quell’immagine mentre carica il video. Avvio automatico del video (se l’implementazione del browser non lo fa), devi fare qualcosa del tipo:

in javascript utilizzando jquery:

 $('#video').click(function(){ document.getElementById('video').play(); }); 

Spero che sia d’aiuto

Sì, sembra una funzione normale che i creatori di browser o gli autori di specifiche html hanno appena “dimenticato”.

Ho scritto un paio di soluzioni ma nessuna di esse è veramente cross browser o solida al 100%. Includere problemi con il clic sui controlli video ha la conseguenza involontaria di interrompere il video. Invece ti consiglierei di usare una soluzione comprovata come VideoJS: http://videojs.com/

Anche usare get (0) funziona

  var play = $('.playbutton'); var video = $('#video'); play.click(function(){ video.get(0).play(); }) 

Stavo facendo questo in reazione ed es6. Ecco una versione moderna che ho realizzato dopo aver letto la soluzione di Daniel Golden:

 const Video = ({videoSources, poster}) => { return (  ) } 
  
splash