Video not loading properly on iOS devices

This topic has 19 replies, 4 voices, and was last updated 1 year, 7 months ago by aitwattman.

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

Author

Posts
2020-08-19 at 10:06 am #31725
web
Customer
I got some problems with videos on iOS devices.

Even though the videos I’m using are quite small (3.5mb) they are not loading in an instant on iOS devices. They load with an offset.

I dont quite know if there is anyway to fix that behaviour. But in order to maybe weaken this effect it would be great if it would be possible to show a texture and just switch the video if it is really loaded and playable.

I tried to alter the loadVideo puzzle and implement the attribute poster, but the webGL is still just black on iOS for a given amount of time. Any chance to fix that?

This was the code I was using:
```
// loadVideo puzzle
function loadVideo(url) {
    var elems = _pGlob.mediaElements;
    if (!(url in elems)) {
        var elem = document.createElement('video');
        elem.src = url;
        elem.playsInline = true;
        elem.preload = 'auto';
        elem.autoload = true;
        elem.poster = urlPath + 'media/Poster.jpg';
        elem.crossOrigin = 'anonymous';
        elems = elem;
    }
    return elems;
}
```
2020-08-19 at 12:17 pm #31731

Yuri Kovelenov
Staff

Hi,

you probably got a syntax error in that snippet:

elems<a class="d4pbbc-url" target="_blank" rel="nofollow"></a> = elem;

Chief 3D Verger | LinkedIn | Twitter

2020-08-19 at 1:21 pm #31733
web
Customer
Hah funny. This is your forum which is altering the code.

See attached picture:

Just to describe the problem a little bit more.
I think this is a webGL ios problem with the videos. When I’m creating the material manually, I get the same issue. On iOS the material is just black and after a while its getting displayed:
```
var texture = new v3d.VideoTexture(videoV3D);
                texture.flipY = false;
                var colorBase = new v3d.Color('#FFF');
                
                var object = getObjectByName('Screen');
                    if (object)
                        object.material = new v3d.MeshStandardMaterial({
                            color: colorBase,
                            emissive: colorBase,
                            emissiveMap: texture
                    });
```
On desktop devices or android mobile, video starts right from the beginning. And everything is display as expected.
2020-08-19 at 2:17 pm #31740

vklein
Customer

Doesn’t iOs have this global annoying restriction to only play videos in HTML upon user agreement (click)? I’m wondering they are automatically playing (despite delay) at all.

2020-08-19 at 2:26 pm #31741

web
Customer

This only applies to videos with sound as far as I’m aware off. When you mute the video you can play html videos just per the autoplay attribute.

In my particular case, the video playing is “kind of” executed by a click event listener. Also the video is playing for me even without any interaction but just with a massive delay.

But thanks for your hint.

2020-08-20 at 7:49 am #31766

Yuri Kovelenov
Staff

Hi,

Indeed, videos on iOS may start with delay (especially big videos). I can recommend to load your file using a <video> tag before the start of the application, and try to play it after the application is loaded.

Chief 3D Verger | LinkedIn | Twitter

2020-08-20 at 8:08 am #31768

web
Customer

I’m creating/loading the videos on runtime via the loadVideo puzzle. And only after a click the video texture is applied to the object.

And when I’m not mistaken your loadVideo puzzle is creating a video tag and putting it hidden into the v3d canvas. So I dont know which would be different if I create the video tags per hand manually an then load the video into the webgl model?

I don’t really think that its the size of the videos on iOS. Because even with a wifi connection and we talking about 3-4mb videos. There shouldnt be a delay of lets say 4 seconds.

Is there a way to apply assign the video material only when verge/browser is sure that it can be played?

2020-08-20 at 8:16 am #31769

Yuri Kovelenov
Staff

Yeah, the idea is to load and start video playback at the very beginning, before Verge3D engine runtime is initialized and the scene is loaded.

This may give your video some time (up to several seconds) to warm up.

Chief 3D Verger | LinkedIn | Twitter

2020-08-20 at 8:22 am #31770

web
Customer

Can you tell me how I can apply a own created html video tag to a webGL material?
Just via a get element by id and then apply it to the material?

2020-08-20 at 8:50 am #31772

Yuri Kovelenov
Staff

You might take a look at the code generated by the load video and replace texture puzzles (by inspecting visual_logic.js).

Chief 3D Verger | LinkedIn | Twitter

2020-08-20 at 9:23 am #31775

web
Customer

I will have a look.

But I have to say that I dont think that this will change anything. The page i’m working on already has a “normal” html video and a webGL video. On android and desktop devices both videos play normally. On iOS the “normal” video is also playing normally, but the webGL doesnt play in an instant, but with a 4-8 second delay

2020-08-20 at 10:06 am #31779

web
Customer

Coming back with another issue. I now also got some problems on android devices.

Which I think is connected to the iOS issue. Sometimes I get this error in the console.log:
[.WebGL-0xd94beb00]GL ERROR :GL_INVALID_VALUE : glCopyTextureCHROMIUM: invalid image size
128[.WebGL-0xd94beb00]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?

I’ve searched the web with connection to three.js and it seems that this is happening when the texture is not fully loader. So how can I ensure that the loadVideo has finished and then call the replaceTexture puzzle?

2020-08-20 at 12:03 pm #31788

Yuri Kovelenov
Staff

You can possibly try some of these events:

https://www.w3schools.com/tags/av_event_canplay.asp

Chief 3D Verger | LinkedIn | Twitter

2020-08-20 at 2:58 pm #31794

web
Customer

Would it be possible to implement something like canplay or canplaythrough into the puzzle logic?

I wondering a bit, that no one else got any issues with the video puzzles.

2020-08-20 at 3:10 pm #31800

Yuri Kovelenov
Staff

we’ll think about it!

Chief 3D Verger | LinkedIn | Twitter
Author

Posts