Lire / mettre en pause une vidéo HTML 5 à l'aide de JQuery

J'essaie de contrôler les vidéos HTML5 à l'aide de JQuery. J'ai deux clips dans une interface à onglets, il y a six onglets au total, les autres ont juste des images. J'essaie de faire jouer les clips vidéo lorsque leur onglet est cliqué, puis de m'arrêter lorsque l'un des autres est cliqué.

Cela doit être une chose simple à faire mais je n'arrive pas à le faire fonctionner, le code que j'utilise pour lire la vidéo est:

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

J'ai lu que l'élément vidéo doit être exposé dans une fonction pour pouvoir le contrôler, mais je ne trouve pas d'exemple. Je peux le faire fonctionner en utilisant JS:

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

Tout conseil serait bon. Merci

Votre solution montre le problème ici - playn'est pas une fonction jQuery mais une fonction de l'élément DOM. Vous devez donc l'appeler sur l'élément DOM. Vous donnez un exemple de la façon de procéder avec les fonctions DOM natives. L'équivalent jQuery - si vous vouliez le faire pour s'adapter à une sélection jQuery existante - le serait $('#videoId').get(0).play(). ( getobtient l'élément DOM natif de la sélection jQuery.)

Tu peux faire

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

Voici comment j'ai réussi à le faire fonctionner:

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

Toutes mes balises HTML5 ont la classe 'myHTMLvideo'

Pourquoi avez-vous besoin d'utiliser jQuery? La solution que vous proposez fonctionne et c'est probablement plus rapide que de construire un objet jQuery.

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

Pour mettre en pause plusieurs vidéos, j'ai trouvé que cela fonctionne bien:

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

Cela peut être mis dans une fonction de clic qui est assez pratique.

Dans le prolongement de la réponse de lonesomeday, vous pouvez également utiliser

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

Notez qu'il n'y a aucune fonction get () ou eq () jQuery appelée. Le tableau de DOM utilisé pour appeler la fonction play (). C'est un raccourci à garder à l'esprit.

J'aime celui la:

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

J'espère que ça aide.

J'utilise FancyBox et jQuery pour intégrer une vidéo. Donnez-lui une pièce d'identité.

Peut-être que la MEILLEURE solution ne pourrait pas changer la lecture / pause différemment - mais c'est facile pour moi et ça marche! :)

dans le

"

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

Ce sont les méthodes faciles que nous pouvons utiliser

sur la fonction de clic du bouton jquery

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

Merci

Juste comme une note, assurez-vous de vérifier si le navigateur prend en charge la fonction vidéo, avant d'essayer de l'invoquer:

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

Cela empêchera les erreurs JavaScript sur les navigateurs qui ne prennent pas en charge le tag vidéo.

Par JQuery à l'aide de sélecteurs

$("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');

Par Javascript en utilisant ID

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

OU

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

utilisez ceci.. $('#video1').attr({'autoplay':'true'});

Je l'ai également fait fonctionner comme ceci:

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

@loneSomeday l'a magnifiquement expliqué, voici une solution qui pourrait également vous donner une bonne idée de la façon de réaliser la fonctionnalité de lecture / pause

lecture / pause de la vidéo au 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>