riproduzione video pausa HTML5 JavaScript

Question

Ho una funzione che riproduce un video quando si fa clic l'immagine del manifesto visualizzata nel lettore e sembra funzionare:

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

Nel tag video HTML5 ho qualcosa di simile: id = "player" onclick = "this.play();"

il problema è se premo pausa sul video lo controlla in effetti di pausa che è buono, ma poi se premo quello che oggi è il tasto play sui controlli video posso vedere il cambiamento pulsante per sospendere di nuovo per una frazione di in secondo luogo, torna di nuovo ad essere un pulsante di riproduzione. Quindi premo play e suona solo per alcuni fotogrammi e poi torna alla pausa. L'unico modo per riprodurlo è fare clic sull'area di visualizzazione del video.

Come posso farlo smettere di tornare in pausa quando si utilizza il pulsante di riproduzione/pausa della barra di controllo e come posso farlo in pausa quando faccio clic sull'area di visualizzazione del video?

Ho provato quanto segue ma non funziona:

var video = document.getElementById('player'); 
video.addEventListener('click',function(){ 
    if(video.paused){ 
     video().play(); 
    }else{ 
     video.pause(); 
    } 
},false); 

Il motivo voglio avere la riproduzione del video quando si preme sul area di visualizzazione effettiva è che è troppo difficile da individuare il piccolo gioco controlbar pulsante su Android perché è così piccolo, sarebbe più facile per le persone semplicemente premere l'area di visualizzazione per farlo funzionare. In Firefox, il lettore video viene riprodotto quando faccio clic sull'area di visualizzazione e su pause, che è esattamente quello che voglio succedere e lo fa anche senza javascript. In Android il video non verrà riprodotto affatto quando premo sull'area di visualizzazione. Quindi sto praticamente cercando di forzare il browser Android a comportarsi come Firefox in modo nativo.

Qualche idea?

Answer 1

$('#play-pause-button').click(function() { 
    if ($("#media-video").get(0).paused) { 
     $("#media-video").get(0).play(); 
    } else { 
     $("#media-video").get(0).pause(); 
    } 
}); 

bene ho fatto questo in Jquery, che semplice e veloce. puoi provarlosolo bisogno di utilizzare l'ID del tag video e il pulsante play/pause godere

EDIT: in vaniglia JavaScript: video non è una funzione, ma una parte del DOM quindi utilizzare

video.play(); 

invece di

video().play() **wrong** 

Answer 2

Da quello che vedo, il video non è una funzione, quindi perché hai parentesi? Questo è il tuo errore.

Così, invece di video() basta usare video

Answer 3

Questo tipo di opere (utilizzando jQuery) per me in Chrome V22, Firefox V15 e IE10:

$('video').on('click', function (e) { 
    if (this.get(0).paused) { 
     this.get(0).play(); 
    } 
    else { 
     this.get(0).pause(); 
    } 
    e.preventDefault(); 
}); 

Il preventDefault qui fermato il problema telaio salto voi vedi ma poi rompe gli altri pulsanti nella sezione di controllo come a schermo intero ecc.

Sembra che non ci sia un facile motivo per farlo? Avrei pensato che i distributori avrebbero avuto il click per giocare di default, sembra la cosa più logica da fare. : |

Answer 4

$('#video-id').click(function() { 
    // jQuery sets this as the DOM element that triggered the event 
    // no need to wrap it in jQuery $(this) and unwrap it again $(this).get(0) 
    if (this.paused) { 
     this.play(); 
    } else { 
     this.pause(); 
    } 
}); 

Answer 5

Questa è la soluzione più semplice

this.on("pause", function() { 
    $('.vjs-big-play-button').removeClass(
     'vjs-hidden' 
    ).css('display', 'block'); 
    this.one("play", function() { 
     $('.vjs-big-play-button').addClass(
      'vjs-hidden' 
     ).css('display', ''); 
    }); 
}); 

Answer 6

Questo è, credo, il modo più semplice e più facile da scrivere ciò che si sta cercando di raggiungere:

var myVideo = document.getElementById('exampleVideo'); 

      $(myVideo).click(function toggleVideoState() { 
       if (myVideo.paused) { 
        myVideo.play(); 
        console.log('Video Playing'); 
       } else { 
        myVideo.pause(); 
        console.log('Video Paused'); 
       } 
       }); 

registrazione alla console è, ovviamente, solo per l'illustrazione.