stop - play pause html5 video javascript

stop video jquery

Question

Tengo una función que reproduce un video cuando hago clic en la imagen del póster que se muestra en el reproductor y parece funcionar:

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

En la etiqueta de video html5 tengo algo así como: id = "player" onclick = "this.play ();"

el problema es si presiono pausa en los controles de video, de hecho pause, lo cual es bueno, pero luego si presiono lo que ahora es el botón reproducir en los controles de video, puedo ver el botón cambiar para pausar de nuevo por una fracción de segundo, luego se va volver a ser un botón de reproducción de nuevo. Así que presiono play y solo se reproduce por unos pocos cuadros y luego vuelve a estar en pausa. La única forma de volver a jugar es haciendo clic en el área de visualización de videos.

¿Cómo puedo hacer que deje de volver a pausar cuando uso el botón reproducir / pausa de la barra de control, y cómo puedo hacer una pausa cuando hago clic en el área de visualización de video?

He intentado lo siguiente pero no funciona:

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

La razón por la que quiero que el video se reproduzca al presionar en el área de visualización real es que es demasiado difícil ubicar el pequeño botón de la barra de control en Android porque es muy pequeño, sería más fácil para las personas simplemente presionar el área de visualización para obtener en marcha. En Firefox, el reproductor de video se reproduce cuando hago clic en el área de visualización y también en las pausas, que es exactamente lo que quiero que ocurra y también lo hace sin necesidad de javascript. En Android, el video no se reproduce cuando presiono el área de visualización. Así que básicamente intento forzar al navegador de Android a comportarse como lo hace Firefox de forma nativa.

¿Algunas ideas?

Answer 1

Por lo que veo, el video no es una función, entonces, ¿por qué tienes paréntesis? Ese es tu error

Entonces en lugar de video() solo usa video

Answer 2

Este tipo de trabajo (usando jquery) para mí en 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();
});

El preventDefault aquí detuvo el problema de salto de cuadros que ves pero luego rompe los otros botones en la sección de control como pantalla completa, etc.

Parece que no hay fácil por qué hacerlo? Pensé que los vendedores tendrían clic para jugar de forma predeterminada, parece lo más lógico. : |

Answer 3

$(''#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 4

Esta es la solución más fácil

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 5

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

Bueno, he hecho esto en Jquery, que simple y rápido. puedes intentarlo Solo necesita usar la identificación de la etiqueta de video y su botón reproducir / pausa.

EDITAR: en JavaScript vanilla: el video no es una función, sino parte de DOM, por lo tanto, usa

 video.play(); 

en lugar de

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

Answer 6

Creo que es la forma más simple y fácil de escribir lo que intenta lograr:

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'');
                }
              });

El inicio de sesión en la consola es, por supuesto, solo para ilustración.