Skip to content

Commit

Permalink
Lily/Video: fix videos rendering as pure black (TurboWarp#1692)
Browse files Browse the repository at this point in the history
by appending them into the DOM in a place that doesn't have display: none;
seems to fix TurboWarp/scratch-render#12
  • Loading branch information
GarboMuffin authored Sep 20, 2024
1 parent 8f81856 commit a834058
Showing 1 changed file with 20 additions and 0 deletions.
20 changes: 20 additions & 0 deletions extensions/Lily/Video.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,21 @@
const renderer = vm.renderer;
const Cast = Scratch.Cast;

// In some versions of Chrome, it seems that trying to render a <video> returns pure black
// if it's not in the DOM in a place the browser thinks is visible. That means we can't
// use display: none.
// See https://github.com/TurboWarp/scratch-render/issues/12
const elementContainer = document.createElement("div");
elementContainer.className = "tw-extensions-lily-videos-container";
elementContainer.style.pointerEvents = "none";
elementContainer.style.position = "absolute";
elementContainer.style.opacity = "0";
elementContainer.style.width = "0";
elementContainer.style.height = "0";
elementContainer.style.visibility = "hidden";
elementContainer.ariaHidden = "true";
document.body.appendChild(elementContainer);

const BitmapSkin = runtime.renderer.exports.BitmapSkin;
class VideoSkin extends BitmapSkin {
constructor(id, renderer, videoName, videoSrc) {
Expand Down Expand Up @@ -50,6 +65,10 @@
this.videoElement.src = videoSrc;
this.videoElement.currentTime = 0;

// <video> must be in the DOM for it to render (see comments above)
elementContainer.appendChild(this.videoElement);
this.videoElement.tabIndex = -1;

this.videoDirty = true;

this.reuploadVideo();
Expand Down Expand Up @@ -106,6 +125,7 @@
dispose() {
super.dispose();
this.videoElement.pause();
this.videoElement.remove();
}
}

Expand Down

0 comments on commit a834058

Please sign in to comment.