We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Video not loading properly on iOS devices

Home Forums Bug Reports and Feature Requests Video not loading properly on iOS devices

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
  • #31725

    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;


    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


    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.


    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.


    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.



    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


    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?


    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


    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?


    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


    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


    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?


    You can possibly try some of these events:


    Chief 3D Verger | LinkedIn | Twitter


    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.


    we’ll think about it!

    Chief 3D Verger | LinkedIn | Twitter

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.