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

Answer 5

would

jQuery.each($('.vid'), pause)

work?

Answer 6

This option works in all browsers. It is a simple for loop to get all the video tags, then pauses each of them.

var videoList = document.getElementsByTagName("video");
for (var i = 0; i < videoList.length; i++) {
    videoList[i].pause();
}

Answer 7

hey take a look on working live example here:

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

https://codepen.io/abdulrehman25/pen/xxaXvoV