Actualmente estoy tratando de escribir un script que silenciará/pausará el video fuera de la pantalla y reproducirá/activará los que están en la pantalla. Los ID de los diferentes videos son mutables 1, mutables 2, etc.

En el siguiente código, empiezo obteniendo la lista de nodos de todos los ID que comienzan con mutable y la cambio a una matriz igual a la variable global 'nodelistToArray' cuando se carga la página.

 var nodelistToArray; window.addEventListener('load', function() { nodelistToArray = [document.querySelectorAll('*[id^="mutable"]')]; })

Luego tengo una nueva función que se ejecuta cuando el usuario se desplaza. En primer lugar, uso .map para registrar todos los valores de la matriz en la consola, esto funciona bien. Registra esto:

 NodeList(2) 0:video#mutable1 1:video#mutable2

pero luego, cuando trato de usar getBoundingClientRect en cada uno de los elementos de la matriz, aparece el error 'el.getBoundingClientRect' no es una función.

 document.addEventListener('scroll', function() { nodelistToArray.map(el => console.log(el)) nodelistToArray.map(el => el.getBoundingClientRect());

También intenté hacer getBoundingClientRect en un solo selector de consulta y funciona bien.