Videos not working anymore on Chrome v76

[borradaniele]

Videos are not working anymore just after updating Google Chrome to v76.
Loading the video (with the app loader) and creating a Sprite using the video as texture does not work anymore. Nothing has been changed in the site source code, I've only updated Chrome. Tested the same site from the same local development server on an older version of Chrome and everything is fine. The error in console is the following

WebGL: INVALID_VALUE: tex(Sub)Image2D: video visible size is empty
[.WebGL-0x7f861a496800]GL ERROR :GL_INVALID_OPERATION : glTexSubImage2D: level 0 does not exist

Steps to Reproduce

I get the same error on the PIXI official site in the video demo page. And the video is not playing even there.
https://pixijs.io/examples/#/sprite/video.js

Environment

Mac OS High Sierra 10.13.6
Chrome Version 76.0.3809.87 (Official Build) (64-bit)
PIXI v5.1.1

[drpepper]

I have the same problem. I'm also on Mac Mohave 10.14.5, Chrome Version 76.0.3809.87 (Build officiel) (64 bits), PixiJS 5.0.2.

I can also confirm that the video works properly in Firefox and in Safari.

[sliepchenko]

Same problem here
Windows 10
Chrome Version 76.0.3809.87 (Official Build) (64-bit)

[eXponenta]

@drpepper @nicholas-slepchenko @borradaniele
This is problem only with Chrome 76 and later.
Temporary fix:
https://www.pixiplayground.com/#/edit/F1nTXxdf9xfBQt6uTurAM

[drpepper]

Thanks @eXponenta !

If understand your fix correctly, the trick is to wait for the promise from the video element's play() method resolve before creating the sprite. I just tried this and it worked for Chrome. However, now Firefox gives me an error and doesn't show the video:

Error: WebGL warning: drawElements: TEXTURE_2D at unit 1 is incomplete: The dimensions of level_base are not all positive.

[eXponenta]

@drpepper Can you create fiddle for this, Because my fix works correct on Firefox?.
You must remember, video can't be played before user interaction.

[borradaniele]

@eXponenta Thanks for the quick reply and the temp fix, I'm going to implement it in the upcoming days.

[drpepper]

I haven't had the time to make a fiddle, sorry.

But I believe the difference for me is that I use the PIXI loader to pre-load the video. The steps I ended up following were:

1. Load the video using the PIXI loader and a custom video element with the plays-inline and muted attributes set.
2. Wait for user interaction
3. Call play() on the video element, and for the promise to resolve
4. On Firefox, wait an addition 100ms. Otherwise I get a WebGL error
5. Create a VideoResource with the pre-loaded video element
6. Create the sprite and display the video

I'm not very happy with this, especially the extra delay part, but it seems to work so far.

[meowtec]

@drpepper @borradaniele

Try this:

const video =  document.createElement('video')
video.crossOrigin = 'anonymous'
video.preload = ''
video.src = 'VIDEO_URL'
const sprite = Sprite.from(video)
app.stage.addChild(sprite)

also see: #6023

[dghez]

Just for information, I had the same problem and I solved it adding video.preload = 'auto' and video.autoload = true where video is const video = document.createElement('video')

[BH-NOTHING]

@dghez It works,thank you !

[BH-NOTHING]

@dghez But It dosen't work on mobile device, is there any solution?

[dghez]

@dghez But It dosen't work on mobile device, is there any solution?

Weird, I tried on my Oneplus7 with Android 9 and Chrome 76.0.3809.111 and it works.
Keep in mind that on mobile you probably need to add other stuff like playsInline and muted to allow autoplay videos

[Bouh]

This dosen't work on my phone "Wiko view 3" in webview or Chrome

Edit : Working now see my fix for my issue here.
Thanks you

[krobibero]

Still seeing this issue with PixiJS 5.1.2 - WebGL 2
WebGL: INVALID_VALUE: tex(Sub)Image2D: video visible size is empty

I'm working with a Dev that has been troubleshooting this issue with his project and unfortunately has not found a fix or workaround.

Warnings point to:
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, baseTexture.format, baseTexture.type, source);
gl.texImage2D(baseTexture.target, 0, baseTexture.format, baseTexture.format, baseTexture.type, source);

[themoonrat]

Could you try the latest dev version please? #6088 might have helped this

[krobibero]

Could you try the latest dev version please? #6088 might have helped this

@themoonrat Confirmed video file issue with Chrome and Opera resolved after upgrading to PixiJS 5.1.5. Many thanks!

[qiancj1022]

@krobibero @themoonrat thanks.

[nuthinking]

video.preload = 'auto'; was enough for me, also because autoload is not recognized.

[lihongyi1234]

@drpepper @borradaniele

Try this:

const video =  document.createElement('video')
video.crossOrigin = 'anonymous'
video.preload = ''
video.src = 'VIDEO_URL'
const sprite = Sprite.from(video)
app.stage.addChild(sprite)

also see: #6023

right!it works

[marcusx2]

It works but it breaks Safari. Videos won't play with the preload attribute.