Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Firefox Webm videos blink
See original GitHub issueHey guys!
Just been using pixijs and its been awesome! Love it! 😄
However there is a issue I’ve had that I cannot figure out,
Firefox when using webms will blink when looping. I’ve tried many different encodings (as suggested in a passed issue) and I’ve not found anything that works in that sense,
I’ve also tried making a pixi-patch which would loop the video without relying on the video tag loop to see if that would help
I’ve created a small app to test and watch the blink regardless of the webm I put in. (this one takes longer to blink )
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>pixi.js example - Graphics</title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<script src="./pixi.js"></script>
</head>
<body>
<script>
// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new PIXI.Application({ backgroundColor: 0x1099bb });
document.body.appendChild(app.view);
// create a new Sprite from an image path
const bunny = PIXI.Sprite.from('https://simpl.info/videoalpha/video/soccer1.webm');
bunny._texture.baseTexture.resource.source.muted = true
bunny._texture.baseTexture.resource.source.loop = true
// center the sprite's anchor point
bunny.anchor.set(0.5);
// move the sprite to the center of the screen
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;
app.stage.addChild(bunny);
</script>
</body>
</html>
Environment
pixi.jsversion: 6.0.2_- Browser & Version: FF 88.0 (64-bit)
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I had a look at this today, and I noticed that every time it flickers, the
video.readyStateis 1, indicating that no frame data is available. The solution seems easy: don’t upload if the video isn’t ready (i.e., only upload ifreadyState >= 2). That seems to work very well. I couldn’t observe any flickering after changing that.I tried to determine whether is really a Firefox bug. But I couldn’t find anything in the webgl spec regarding uploading videos that aren’t ready. So I assume it’s undefined behavior. Firefox uploads zeros and prints a warning. I assume Chrome doesn’t upload anything, if the video isn’t ready, leaving the texture unchanged and is silent about it.
Firefox warning when uploading a video texture with
readyState < 2:Loop event log: