web-dev-qa-db-fra.com

Lire / mettre en pause une vidéo HTML 5 avec JQuery

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

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 le suivant:

$('#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 ne trouve pas d'exemple. Je suis capable de le faire fonctionner avec JS:

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

Tout conseil serait bon. Merci

jqueryhtmlcsshtml5html5-video
187
Barny83

Votre solution montre le problème ici - play n'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 procédure à suivre avec les fonctions DOM natives. L'équivalent de jQuery - si vous voulez faire cela pour s'intégrer à une sélection existante de jQuery - serait $('#videoId').get(0).play(). ( get obtient l'élément DOM natif à partir de la sélection jQuery.)

327
lonesomeday

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

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

Tous mes tags HTML5 ont la classe 'myHTMLvideo'

53
Miguel Tavares

Tu peux faire

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

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

document.getElementById('videoId').play();
20
sudo work

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

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

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

19
Josh Holmes

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

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

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

13
ozanmuyes

J'aime celui la:

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

J'espère que ça aide.

10
user4227915

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

Peut-être pas la meilleure solution ne pourrait jouer/pause différemment - mais 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>`
4
Alexander W

Ce sont les méthodes faciles que nous pouvons utiliser

sur la fonction de clic sur le bouton jQuery

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

Merci

2
subindas pm

En guise de remarque, assurez-vous que le navigateur prend en charge la fonction vidéo avant d'essayer de l'invoquer:

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

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

1
Alex W

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 l'ID

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

OR

document.getElementById('video_ID').play();  document.getElementById('video_ID').pause();
1
user1570636
    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>
0
KEERTHAN K C
<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>
0
Anusuya

Je l'ai aussi fait fonctionner comme ceci:

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

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

0
Antares500

@loneSomeday l'a très bien expliqué, voici une solution qui pourrait également vous donner une bonne idée de la fonctionnalité de lecture/pause.

lecture/pause de la vidéo sur le clic

0
sheelpriy