Reproduzca / pause video HTML 5 usando JQuery

Estoy tratando de controlar videos HTML5 usando JQuery. Tengo dos clips en una interfaz con pestañas, hay seis pestañas en total, los otros solo tienen imágenes. Estoy tratando de hacer que los videoclips se reproduzcan cuando se hace clic en su pestaña y luego se detiene cuando se hace clic en cualquiera de los otros.

Esto debe ser algo simple de hacer, pero parece que 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 exponerse en una función para poder controlarlo, pero no puedo encontrar un ejemplo. Puedo hacer que funcione usando JS:

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

Cualquier consejo sería genial. Gracias

Su solución muestra el problema aquí: playno es una función jQuery sino una función del elemento DOM. Por lo tanto, debe invocarlo sobre el elemento DOM. Usted 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(). ( getobtiene el elemento DOM nativo de la selección jQuery).

Tu puedes hacer

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

Así es como logré hacerlo funcionar:

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

Todas mis etiquetas HTML5 tienen la clase 'myHTMLvideo'

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

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

Para pausar varios videos, descubrí que esto funciona bien:

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

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

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 get () o eq () jQuery. La matriz de DOM utilizada para llamar a la función play (). Es un atajo a tener en cuenta.

Me gusta este:

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

Espero eso ayude.

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

Quizás la MEJOR solución no podría alternar entre reproducción / pausa 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>`

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

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

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

Eso evitará errores de JavaScript en los navegadores que no admiten la etiqueta de video.

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();

utilizar este.. $('#video1').attr({'autoplay':'true'});

También lo hice funcionar así:

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

@loneSomeday lo explicó maravillosamente, aquí una solución que también podría darle una buena idea de cómo lograr la funcionalidad de reproducción / pausa

reproducción / pausa de video al hacer clic

<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> 

    enter code here
<form class="md-form" action="#">
  <div class="file-field">
    <div class="btn btn-primary btn-sm float-left">
      <span>Choose files</span>
      <input type="file" multiple>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Upload one or more files">
    </div>
  </div>
</form>

<video  width="320" height="240" id="keerthan"></video>

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 
<script>
    (function localFileVideoPlayer() {

  var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')




    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()
function playVid() { 
  keerthan.play(); 
} 

function pauseVid() { 
  keerthan.pause(); 
} 

</script>