jquery - reproducir - video events html

Reproducir/pausar video HTML 5 usando JQuery

Question

Estoy intentando controlar videos HTML5 usando JQuery. Tengo dos clips en una interfaz con pestañas, hay seis pestañas en total, las otras solo tienen imágenes. Intento que los video clips se reproduzcan cuando se hace clic en su pestaña y luego se detienen cuando se hace clic en los demás.

Esto debe ser algo simple de hacer pero no puedo hacer que funcione, el código que estoy usando para reproducir el video es:

$(''#playMovie1'').click(function(){
  $(''#movie1'').play();
      });

He leído que el elemento de video debe estar expuesto en una función para poder controlarlo pero no puede encontrar un ejemplo. Puedo hacer que funcione usando JS:

document.getElementById(''movie1'').play();

Cualquier consejo sería genial. Gracias

Answer 1

¿Por qué necesitas usar jQuery? La solución propuesta funciona, y probablemente sea más rápida que construir un objeto jQuery.

document.getElementById(''videoId'').play();

Answer 2

@loneSomeday lo explicó muy bien, aquí hay una solución que también puede darte una buena idea de cómo lograr la funcionalidad de reproducción / pausa

reproducción / pausa de video al hacer clic

Answer 3

Así es como me las arreglé para hacer que funcione:

jQuery( document ).ready(function($) {
    $(''.myHTMLvideo'').click(function() {
        this.paused ? this.play() : this.pause();
    });
});

Todas mis etiquetas HTML5 tienen la clase ''myHTMLvideo''

Answer 4

Como una extensión de la respuesta de lonesomeday, también puedes usar

$(''#playMovie1'').click(function(){
    $(''#movie1'')[0].play();
});

Observe que no se llama a la función jQuery get () o eq (). La matriz de DOM solía llamar a la función play (). Es un atajo para tener en cuenta.

Answer 5

Estos son los métodos fáciles que podemos usar

en la función de clic del botón jquery

$("#button").click(function(event){
    $(''video'').trigger(''play'');
    $(''video'').trigger(''pause'');
}

Gracias

Answer 6

Me gusta este:

$(''video'').click(function(){
    this[this.paused ? ''play'' : ''pause'']();
});

Espero eso ayude.

Answer 7

Para pausar videos múltiples he encontrado que esto funciona muy bien:

$("video").each(function(){
    $(this).get(0).pause();
});

Esto se puede poner en una función de clic que es bastante útil.

Answer 8

Por JQuery usando selectores

$("video_selector").trigger(''play'');  
$("video_selector").trigger(''pause'');
$("div.video:first").trigger(''play'');$("div.video:first").trigger(''pause'');
$("#video_ID").trigger(''play'');$("#video_ID").trigger(''pause'');

Por Javascript usando ID

video_ID.play();  video_ID.pause();

O

document.getElementById(''video_ID'').play();  document.getElementById(''video_ID'').pause();

Answer 9

Solo como una nota, asegúrese de verificar si el navegador admite la función de video, antes de intentar invocarla:

if($(''#movie1'')[0].play)
    $(''#movie1'')[0].play();

Eso evitará errores de JavaScript en los navegadores que no son compatibles con la etiqueta de video.

Answer 10

Su solución muestra el problema aquí: el play no es una función jQuery, sino una función del elemento DOM. Por lo tanto, debe invocarlo sobre el elemento DOM. Da un ejemplo de cómo hacer esto con las funciones DOM nativas. El equivalente de jQuery, si desea hacer esto para encajar con una selección de jQuery existente, sería $(''#videoId'').get(0).play() . ( get obtiene el elemento DOM nativo de la selección de jQuery).

Answer 11

También lo hice funcionar así:

$(window).scroll(function() {
    if($(window).scrollTop() > 0)
        document.querySelector(''#video'').pause();
    else
        document.querySelector(''#video'').play();
});

Answer 12

Tu puedes hacer

$(''video'').trigger(''play'');
$(''video'').trigger(''pause'');

Answer 13

Uso FancyBox y jQuery para incrustar un video. Dale una identificación.

Quizás la MEJOR solución no podría alternar entre reproducir / pausar de manera diferente, ¡pero es fácil para mí y FUNCIONA! :)

En el

`

<input type="hidden" id="current_video_playing">

<input type="hidden" id="current_video_status" value="playing">

<video id="video-1523" autobuffer="false" src="movie.mp4"></video>

<script>

// Play Pause with spacebar

$(document).keypress(function(e) { 

    theVideo = document.getElementById(''current_video_playing'').value

    if (e.which == 32) {

        if (document.getElementById(''current_video_status'').value == ''playing'') {

            document.getElementById(theVideo).pause();

            document.getElementById(''current_video_status'').value = ''paused''

        } else {

            document.getElementById(''current_video_status'').value = ''playing''

            document.getElementById(theVideo).play();

        }

    }

});

</script>`

Answer 14

usa esto ... $(''#video1'').attr({''autoplay'':''true''});

Answer 15

<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>
<script> 
$(document).ready(function(){
document.getElementById(''vid'').play(); });
</script>