Como verificar se todos os video de um array estão em play

Front-end JavaScript
, ,
#1

Eu tenho 6 video no meu html e quero que no meu javascript mande uma mensagem no console sempre que todos os video estiverem em pausado e se um deles ficar em play eu quero que a mensagem pare de ser exibida eu tentei fazer deste jeito,

var videos = document.querySelectorAll(".video") ;
setInterval(function() {
     for (var i = 0; i < depVideos.length; i++) {
           if (depVideos[i].paused == true) {
               console.log("Pausado")
           }
     }
, 2000);

porém, a mensagem é exibida mesmo um deles fique em play

#2

Você pode utilizar um filter para isso:

setInterval(function () {
  var filterVideos = depVideos.filter((v) => !v.paused)

  if (!filterVideos.length) console.log('Pausado')
}, 2000)
#3 
> (índice):359 Uncaught TypeError: depVideos.filter is not a function
>     at (índice):359:45

Está aparecendo este erro no console

#4

A variável depVideos é um Array?

#6

Sim, pois ele pega mais de um video

#7

Isso acontece porque em nenhum momento você interrompe o setInterval.

Talvez seja mais simples usar setTimeout, que só executa uma vez. Assim, vc verifica se os vídeos estão pausados, e se todos estiverem, aí vc chama setTimeout de novo.

Também não ficou claro de onde vem esse depVideos, acho que deveria usar o videos, não? Enfim, seria algo assim:

var videos = document.querySelectorAll(".video");

function todosPausados() {
  for (var i = 0; i < videos.length; i++) {
    if (!videos[i].paused) {
      return false; // se um não está pausado, já retorna (nem precisa ver os outros)
    }
  }
  // se chegou aqui, é porque todos estão pausados
  return true;
}
function alerta() {
  if (todosPausados()) {
    console.log('Todos os vídeos estão pausados');
    // só chama de novo se todos estão pausados
    setTimeout(alerta, 2000);
  }
}

// chama a primeira vez
setTimeout(alerta, 2000);

Ou seja, se todos estiverem pausados, ele chama novamente a função depois de 2 segundos. Se pelo menos um não estiver pausado, ele não chama mais.

O detalhe é que se os vídeos forem pausados novamente, ele não vai mais verificar de novo. Mas se quiser que volte a verificar, pode usar setInterval, fica assim:

var videos = document.querySelectorAll(".video");

function todosPausados() {
  for (var i = 0; i < videos.length; i++) {
    if (!videos[i].paused) {
      return false; // se um não está pausado, já retorna (nem precisa ver os outros)
    }
  }
  // se chegou aqui, é porque todos estão pausados
  return true;
}
function alerta() {
  if (todosPausados()) {
    console.log('Todos os vídeos estão pausados');
  }
}

setInterval(alerta, 2000);

A diferença é que agora ele fica verificando “pra sempre” a cada 2 segundos.

1 curtida
#8

Era isso que eu queria, vou testar agora, obrigado; em relação a depVideos, é que dep vem depoimentos eu tinha trocado para video para facilitar para quem fosse ler a pergunta aí eu esqueci de mudar o que fica no loop for.

#9

Quando eu dou play em um dos video, ele continua dando o alerta de que todos estão pausados.

#10

Foi um erro de digitação, esqueci dos parênteses ao chamar a função (já arrumei no post acima):

function alerta() {
  if (todosPausados()) { // <--- AQUI, faltou os parênteses
    console.log('Todos os vídeos estão pausados');
  }
}
#11

Obrigado