In my game, I use div elements to represent characters, with each div containing a video child element that plays in a loop to animate the character. Whenever something happens on the screen, I delete all the character divs and recreate them for each character in the scene. However, I encountered a problem where switching frames (from one set of characters to another) caused the videos of the characters in the following frame not to play.
//Snippet from the applyFrame function responsible for displaying objects on the screen
//First, all character objects from the previous frame are removed
//mainFrame is the background holding other interactive objects
function applyFrame() {
for (let i = 0; i < mainFrame.children.length; i++) {
mainFrame.children[i].children[0].pause();
mainFrame.removeChild(mainFrame.children[i]);
}
//New div objects are created for each character and a video element is appended to play animations
//currentFrame contains information about character positions, sizes, and media 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");
if (currentFrame.objects[i].video != "" || currentFrame.objects[i].video != undefined) {
//Check for blob URL to assign it to the video element
for (let j = 0; j < animationBlobsGLOB.length; j++) {
if (currentFrame.objects[i].video == animationBlobsGLOB[j].name) {
//Assign the blob URL to the video element src
mainFrame.children[i].children[0].src = animationBlobsGLOB[j].blob;
//Play the video and set it to loop
video.play();
video.addEventListener("ended", function() {
video.play();
});
}
}
}
}
}
I suspect that deleting the divs containing the videos may be causing them to lose their events. This could explain the error message "Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()." Sometimes repeating the applyFrame function resolves the issue, but running it twice may not be ideal.