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


206

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

Réponses:


357

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


5
C'est génial, fonctionne parfaitement, merci en effet. C'est bien aussi de mieux comprendre le DOM.
Barny83

1
L'utilisation de JQuery pour contrôler la vidéo de cette manière semble entraîner des problèmes de lecture sur l'iPhone. J'ai l'élément vidéo dans un onglet, la requête le révèle, mais cliquer sur la flèche de démarrage de la vidéo ne démarre pas le clip. Lorsque je supprime la ligne $ ('# videoId'). Get (0) .play () il n'y a pas de problème. Quelle est la meilleure façon de contourner cela? Je pensais que je pourrais supprimer le js avec une déclaration conditionnelle pour iOS - la vidéo ne démarrera pas automatiquement pour les appareils iOS de toute façon, donc je serais heureux de le faire - ou existe-t-il une solution plus simple? Toute aide très appréciée.
Barny83

Comment puis-je faire cette pause tous les éléments <video> sur une page?
prismspecs

5
@russellsayshi - non, cela ne jouera qu'une seule vidéo; prismspecs a demandé TOUTES les vidéos. Syntaxe correcte: $('video').each(this.play());pour tout jouer; $('video').each(this.pause());pour tout mettre en pause. each()est une fonction jQuery, ce qui lui est transmis est une fonction javascript, qui est appliquée à chaque élément. Au fur et à mesure que chaque élément est traité, thisreprésente cet élément.
ToolmakerSteve

11
Si vous voulez seulement le premier élément, peut simplifier en remplaçant .get(0)par [0]. Alors $('video')[0].play();ou pour un identifiant spécifique $('#videoId')[0].play();.
ToolmakerSteve

57

Tu peux faire

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

2
Vous pouvez même basculer: $ ('video'). Trigger ($ ('video'). Prop ('paused')? 'Play': 'pause');
Darío Pm

56

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'


7
Notez qu'il n'est pas nécessaire de boucler dans jQuery afin que vous puissiez économiser cette surcharge en remplaçant la ligne ternaire par ceci:this.paused ? this.play() : this.pause();
Pete Watts

21

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

Découvrez la solution de lonesomeday si vous insistez sur une implémentation jQuery (également pour une explication des raisons pour lesquelles vous ne pouvez pas simplement appeler playun objet jQuery).
sudo work

Je pensais que j'utiliserais le code dans d'autres jQuery, et le ferai probablement, mais en l'état, j'utilise juste cette ligne, donc je suppose que cela aurait pu être fait avec le code que j'avais ... aussi je n'étais pas sûr si c'était une bonne pratique de mélanger. Merci pour les conseils quand même.
Barny83

2
Si vous avez déjà instancié un objet jQuery à movie1travers $('movie1')pour d'autres actions jQuery, alors ça va; cependant, si vous le faites uniquement à cet endroit, vous constaterez une perte de performances. Ce n'est peut-être pas assez visible, mais j'aime beaucoup optimiser.
sudo work

@sudowork - sérieusement? vous parlez de perte de performances lors du démarrage de la lecture d'une vidéo? Si votre appareil est assez rapide pour lire la vidéo, il est assez rapide pour effectuer un baril d'actions jQuery sans que l'utilisateur s'en rende compte.
ToolmakerSteve

19

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.


4
Vous pouvez faire la même chose comme ceci: $ ("video"). Each (function () {this.pause ()});
Marcel M.

1
$ (this) -> vous créez un objet jquery à partir de "this" object. get (0) -> vous récupérez l'objet "this" d'origine de l'objet jquery ... this === $ (this) .get (0)
Blackfire

14

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.


12

J'aime celui la:

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

J'espère que ça aide.


4

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

3

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


1

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.


1

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

0

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


2
"J'essaie de faire jouer les clips vidéo lorsque leur onglet est cliqué" - donc une gestion contrôlée par les événements est nécessaire.
davidenke

0

Je l'ai également fait fonctionner comme ceci:

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


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

Veuillez ajouter quelques explications à votre réponse
Sahil Mittal

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

Salut, bienvenue dans Stack Overflow. Lorsque vous répondez à une question qui contient déjà de nombreuses réponses, assurez-vous d'ajouter des informations supplémentaires sur les raisons pour lesquelles la réponse que vous fournissez est substantielle et ne fait pas simplement écho à ce qui a déjà été vérifié par l'affiche originale. Ceci est particulièrement important dans les réponses "code uniquement" comme celle que vous avez fournie.
chb

-1

var vid = document.getElementById("myVideo"); 
function playVid() { 
  vid.play(); 
} 
function pauseVid() { 
  vid.pause(); 
} 
<video id="myVideo" width="320" height="176">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 


La solution dans votre réponse ne semble pas fonctionner
Cray
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.