How can I pause ALL videos (html5) at once?

Question

// now pause all active videos
$('.vid').get(0).pause();
$('.vid').get(1).pause();
$('.vid').get(2).pause();

That's what I have right now, but it's less than ideal. I'm a bit tired, so I could be missing something obvious, but how can I just tell it do pause all instances of .vid class on the page?

Answer 1

Try

$('.vid').each(function() {
    $(this).get(0).pause();
});

Answer 2

There's no real need for jQuery, the ES6 way (that should work in most modern browsers...)

For all <video> tags:

document.querySelectorAll('video').forEach(vid => vid.pause());

or in your case (looking for the .vid class):

document.querySelectorAll('.vid').forEach(vid => vid.pause());

Answer 3

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

more general? for all videos!

Answer 4

Video.js stores all the players on the page in an Object in V.players so you could do the below.

Video JS 3.x

Normal JS

for( player in window._V_.players ) {
    window._V_.players[player].pause();
}

http://jsfiddle.net/3n1gm4/SNZAS/

jQuery

jQuery.each( window._V_.players, function( i, player ) {
    player.pause();
});

http://jsfiddle.net/3n1gm4/cJ8jx/

Video JS 4.x

Normal JS

for( player in window.vjs.players ) {
    window.vjs.players[player].pause();
}

jQuery

jQuery.each( window.vjs.players, function( i, player ) {
    player.pause();
});