Internet Explorer 11 doesn't play video

Help & Support
1

Internet Explorer 11 won’t play video. It merely shows a black screen. This is true for our project as well as for this example/tutorial project:

I understand that IE 11 is an old browser, that Microsoft suggests going to Edge (which works BTW). But it still represents about 5% of the browsers used and Playcanvas docs say that it is a supported browser. Any clues as to what might be a solution other than using a different browser?

2

May be an issue with the video playback rather than PlayCanvas.

Playback of MP4 videos is a bit more fiddly in IE11: https://stackoverflow.com/questions/44727595/html-5-mp4-video-plays-in-chrome-but-not-ie11

3

Thanks for the info and link. Good clue.

I re-encoded so that the moov atom is at the beginning of the file and have the same problem. Further, we have no problem direct playing standard Adobe encoded h.264/mp4 files on IE 11 from our website. Given that PlayCanvas plays video through an MP4 audio function, I’m still suspicious that this could be a PlayCanvas issue.

I’ll put together a dummy page and see if my files will play on IE 11 otherwise just to be sure.

4

Further digging and a look at the IE 11 error message on the console turned up this:

WEBGL11003: INVALID_VALUE: pixelStorei
and
WEBGL11072: INVALID_VALUE: texImage2D: This texture source is not supported

So I converted one of my videos to PoT and also moved the moov atom to the front of the file. I double checked that we are using LINEAR filtering and CLAMP_TO_EDGE. No joy.

I’ve also confirmed that some other videos that play using HTML5 won’t play through our PlayCanvas app.

So right now it looks like IE 11 simply does not support the WEB GL processes that PlayCanvas uses (and perhaps all WEB GL apps use) for displaying video.

I’m still open to ideas if any of this brings something to mind.

5

Does other PlayCanvas apps work? Eg from the showcase?

It does sound like the WebGL support in IE11 is a little spotty looking at links.

Unfortunately, I don’t have access to IE11. @Mr_F, any idea if it’s possible to have a video texture on IE11?

6

No. I’ve yet to find a PlayCanvas project that plays video. I tried your falling TVs, the Video Textures demo linked above, and my own test project.

So far, all indications are that this is “broken” in IE 11. Were I to speculate, I’d assume that Microsoft chose not to fix it because they want to push people toward Edge anyway. No point in fixing things on a platform that they want to retire.

7

These also fail and are not PlayCanvas. Same WEBGL11072 error code.
https://webglsamples.org/video/video.html
https://krpano.com/ios/bugs/ios8-webgl-video/
http://jeromeetienne.github.io/threex.videotexture/examples/videotexture.html
https://alteredqualia.com/xg/examples/webgl_video_performance_MP4_1024p.html

Seems pretty clear now that this is either an IE 11 limitation or something that needs a special solution/workaround in order to work.

8

OK. Given that IE 11 simply isn’t going to play video via WebGL I’d like to alert the user that their browser won’t support WebGL video. At first glance I don’t see a way for PlayCanvas to detect for IE 11, so it seems that the way to go would be to use the .error method as described in the API.


entity.script.on('error', function (scriptInstance, err, method) {
    // script instance caught an exception
});

If I understand the API correctly, “err” should contain the error message and I can evaluate that message to decide what message (if any) to display.

Does this seem like an appropriate approach?

9

You can check the browser agent. I have never tried the error even on a script before.

10

Everywhere I go seems to recommend against checking for User Agent. Also, it appears that IE 11 can present a number of different user strings - none of which seem to explicitly identify the browser as Internet Explorer.

Here is what mine shows:
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko

The standard recommendation seems to be to check for feature availability. I guess I’ll look into that.

11

So I did some poking around to try to figure out how to test for the missing/failed features. The two big clues thrown in the console when the project loads are:
WEBGL11003: INVALID_VALUE: pixelStorei
and
WEBGL11072: INVALID_VALUE: texImage2D: This texture source is not supported

So the question for a newbie like me was, “How do I call these functions given that I’m not directly calling them in my scripts and since they occure when the project loads?”

So I went to the code where we load the video texture and noticed the following code for creating the video texture. Keep in mind that I only sorta understand the code given that I’ve mostly just copied it from the sample projects.

// Create a texture to hold the video frame data            
var videoTexture = new pc.Texture(app.graphicsDevice, {
    format: pc.PIXELFORMAT_R5_G6_B5,
    autoMipmap: false
});
videoTexture.minFilter = pc.FILTER_LINEAR;
videoTexture.magFilter = pc.FILTER_LINEAR;
videoTexture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
videoTexture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;

So the most interesting thing there to me was app.graphicsDevice. So I decided to find out what that thing was made of by calling it in a console.log() like this.

console.log (this.app.graphicsDevice);

It was much easier to navigate through all the stuff that this object contains using the IE 11 console. So I did that and found a category “gl” and a subcategory “[functions]”. Under that, I found both pixelStorei and texImage2D. Each of these had a length of “0”. So I made some console logs and checked the value in Firefox (and later Edge and Chrome) and saw that they had values of “2” and “6” respectively. Aha!! A clear difference in the two functions that were throwing the errors and presumably, these values must be non-zero for video to play. Also a zero suggests no value was set - presumably due to the initial error? BTW, while I was poking around I noticed a boolean “webgl2” that was showing “false” for IE 11 but true for the others.

So where I’m at now is this simple code that displays an alert if both pixelStorei and texImage2D = 0.

if(this.app.graphicsDevice.gl.texImage2D.length === 0 && this.app.graphicsDevice.gl.pixelStorei.length === 0){
            alert("Your browser does not appear to support playing video for this app in WebGL and may render a blank screen. Please try a different browser in order to view this video.");
        }

This tosses up an alert on IE 11 That you can dismiss with a click. It does not toss up an alert anywhere else so far. Of course, I only have IE 11 that won’t play video, so I’m not sure that this will catch all situations where video won’t play. But this check doesn’t fire anywhere else and I’ve used two browsers on iPad, Android Chrome (an old tablet and an old phone) or the other browsers I have on Win10. The video plays on all of these devices and no alert is displayed.

A final note:
unmaskedRenderer reports back the video card in my machine
unmaskedVendor reports back the “vendor” for the browser but seems unreliable since it reports “Google Inc.” under Firefox.

I’ve only included all this extra detail in the hopes that it will be useful for someone else tracking down this kind of problem/info.

1 Like