En el juego, tengo objetos div que representan personajes, un div tiene un hijo de video que juega en el bucle para representar personajes animados. Cada vez que sucede algo en la pantalla, elimino todos los objetos div que representan personajes y los vuelvo a crear para cada personaje de la escena. Aquí está el problema que encontré, cuando cambio un cuadro por otro (me refiero aquí a una escena con personajes y cambio a otra que podría tener un conjunto diferente de personajes) el siguiente no reproduce videos de personajes. No estoy seguro de si el código es útil en esta situación, pero aquí algunos fragmentos:
//Little part of applyFrame function that controls how objects are represented on the screen //Here I first delete all character objects from previous frame //mainFrame is just a background and holds other interactable objects in the game function applyFrame() { for (let i = 0; i < mainFrame.children.length; i++) { mainFrame.children[i].children[0].pause(); mainFrame.removeChild(mainFrame.children[i]); } //Then I create for each character new div object and append it a video so I can play animations for characters //currentFrame is an object that holds all information about how many characters, //where they positioned, size and video/image src. for (let i = 0; i < currentFrame.objects.length; i++) { let elem = document.createElement("div"); mainFrame.appendChild(elem); mainFrame.children[i].style.opacity = "0"; let video = document.createElement("video"); elem.appendChild(video); video.classList.add("elemVideo"); //here I just check if there is a video for character otherwise I set a picture if (currentFrame.objects[i].video != "" || currentFrame.objects[i].video != undefined) { //here I simply seek for a blob URL to assign it to an element for (let j = 0; j < animationBlobsGLOB.length; j++) { if (currentFrame.objects[i].video == animationBlobsGLOB[j].name) { //assigning a video element src mainFrame.children[i].children[0].src = animationBlobsGLOB[j].blob; //playing the video and setting it a loop video.play(); video.addEventListener("ended", function() { video.play(); }); } } } } }Me pregunto si eso tiene algo que ver con la eliminación de divs que contienen videos. ¿También pierden sus eventos? Porque a veces recibo "DOMException no detectada (en promesa): la solicitud de reproducción () fue interrumpida por una llamada a pausa ()", pero no siempre. Además, si juego applyFrame, uno más videos se reproducen correctamente. Pero no estoy seguro de querer ejecutar esta función dos veces.
Resuelto, en lugar de esto:
mainFrame.children[i].children[0].src = animationBlobsGLOB[j].blob; video.play(); video.addEventListener("ended", function() { video.play(); });Tuve que escribir esto:
mainFrame.children[i].children[0].src = animationBlobsGLOB[j].blob; mainFrame.children[i].children[0].play(); mainFrame.children[i].children[0].addEventListener("ended", function() { mainFrame.children[i].children[0].play(); });Pero todavía no entiendo por qué funciona de esa manera.