Videos keep freezing randomly at begin of MapLoad

● ARCHIVED · READ-ONLY
Started by skodone 9 posts View original ↗
  1. skodone
    #1 Source
    User: Skodone/Ben
    Bug: Video keeps freezing randomly at begin of MapLoad
    How to Replicate the Bug:
    • When one puts an event with a videocall (WEBM) at the beginning of a map, so it is triggered as soon as possible via player touch, the video is very likely to freeze after a small amount of frames
    • I provided a fully stripped project based on the area of the game the bug happens almost 90% of the time.
    • The 5MB limit is exceeded (5.2mb ZIP) due to the video that causes the problem. I included exactly the video we had the most problems with and it has 3.5mb. The other videos we used are less likely to cause the problem but sometimes do. With this video the bug was best to reproduce.
    • How to trigger: Start the game and immediately push right so the actor would touch the event as soon as possible. The video will start playing and most likely be stuck. Touch the event only once. If the video is stuck touching the even again is more likely to start the video functioning.
    • DOWNLOAD: path-out.net/test/pathout.zip
    Other:
    We have a fully working build of the game on Steam since a year and no reports of this behavior from the steam version.
    We recently decided to localize the game to reach a broader market and encountered the bug after adding subtitles to the videos in game.
    What i tried so far:
    - I started a complete new project with no plugins and inserted a single event with the video: video freezes after some frames
    - i stripped our original project from all plugins one after the other to see if one of the plugins was the fault.
    - i tried to alter the core.js to not start the video before the data is loaded, unsuccessfully

    My thoughts on the problem:
    either the video is indeed started before it is fully loaded or decoded and therefore crashes on play
    or it is a chromium problem since the update, where a user interaction is required for videos to start playing.

    I would greatly appreciate if you could have a look into this problem and hope that you are better at finding a solution
    than I am...
    Thanks a lot in advance :) and all the best,
    Ben from the PathOut team

    PS: Was sent to here by @mlogan from the RPG Maker MV Improvement Boards
  2. mlogan
    #2 Source
    Just to clarify, I thought perhaps skodone could post here while waiting for Archeia to look at the other thread, in the event that it is not actually a bug. It may be, I don’t know.

    Also, I tried the game, the video had no problems running in Microsoft Edge. Chrome gave an error that data/Actor.json failed to load, even though the file was in the folder.
  3. Jonforum
    #3 Source
    - I started a complete new project with no plugins and inserted a single event with the video: video freezes after some frames
    This it from how the source MediaElement are managed in old version of PIXI
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
    And it related to autoplay, the video start before it finish to fully load textures.
    So it will play around ~1 frame or 2 frame and it will freeze. !

    It fixed in new version of pixijs `dev`, you can now pass 3er parameter to force autoplay false, and start only when is ready.
    If you don't want update pixijs , you can hack the file VideoBaseTexture.js
    And change the autoPlay to this.autoPlay = source.autoplay;
    To manually start video when is ready.

    You can read more info about this bug, many people have same issue.
    https://github.com/pixijs/pixi.js/pull/5112
  4. skodone
    #4 Source
    Jonforum said:
    This it from how the source MediaElement are managed in old version of PIXI
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
    And it related to autoplay, the video start before it finish to fully load textures.
    So it will play around ~1 frame or 2 frame and it will freeze. !

    It fixed in new version of pixijs `dev`, you can now pass 3er parameter to force autoplay false, and start only when is ready.
    If you don't want update pixijs , you can hack the file VideoBaseTexture.js
    And change the autoPlay to this.autoPlay = source.autoplay;
    To manually start video when is ready.

    You can read more info about this bug, many people have same issue.
    https://github.com/pixijs/pixi.js/pull/5112


    oh my gosh... i dowloaded the new dev-version of pixie.js, the new pixie-tilemap and finally managed to build the new pixie-picture...
    And now I just get errors when starting the game...


    Code:
    Uncaught TypeError: Cannot read property 'prototype' of undefined
    at rpg_core.js:5400
Force_Fullscreen.js:75 ==========================
Force_Fullscreen.js:76 Force_Fullscreen
Force_Fullscreen.js:77 Following function and their states
Force_Fullscreen.js:78 {
  "Windowmode": "disabled"
}
Force_Fullscreen.js:79 ==========================
index.js:273
    PixiJS 4.8.2 - ✰ WebGL ✰      http://www.pixijs.com/    ♥♥♥


rpg_managers.js:1756 TypeError: WebAudio.initialize is not a function
    at Function.SceneManager.initAudio (rpg_managers.js:1670)
    at Function.SceneManager.initialize (rpg_managers.js:1619)
    at Function.SceneManager.run (rpg_managers.js:1608)
    at window.onload (main.js:8)


    i guess the pixi version is not fully compatible with rpgmaker yet?!
    Also where do i find VideoBaseTexture.js? Do i have to download the pixi version i used, alter the videobasetexture and then
    build it??
  5. Jonforum
    #5 Source
    pixi are typeScript projet , you need to download the project , change the code and make a new distribution in js.
    Or you can search in pixi.js and juste change the code line.
    A, not remember where this line are in pixi.js
    But i remember the video are alway set to this.autoPlay = true; and this is very bad idea!
    so you need to change to false or set from source.autoplay; that by default are also false;

    Than you will can load yours videos, and add a callback to play video when is ready
    videoControler.play();

    Otherwise you will have random freeze.

    The best way it to preload all you video in a loader scene and use the dataVideo from you loader cache.

    PHP:
        create_IntroVideo () {
        const dataVideo = $Loader.Data2['vidA1'].dataVideo; // use the video cache from loader
        const texture = PIXI.Texture.fromVideo( dataVideo, 1, void 0, false );
        const videoSprite = new PIXI.Sprite(texture);
        const videoControler = texture.baseTexture.source;
 
        videoSprite.width = 1920;
        videoSprite.height = 1080;
 
        videoControler.currentTime = 12.2; // jump for debug only
        videoControler.onended = () => {
            //this.nextVideo(); // TODO:
           $stage.goto('Scene_Title');
       
        }

        this.addChild(videoSprite);
        this.videoControler = videoControler;
        videoControler.play();
    };
  6. skodone
    #6 Source
    I'm sorry to bother you this long with my problem but i do not seem to be able to resolve it -.-

    I altered Pixie.js now correctly and the game works again but the videos still do not.

    I don't really understand what you mean by creating a loader scene, nor how to implement the code
    snippet you provided.
    I do not use any of the functions described by you to start a video but the Graphics.playVideo() function.

    Specifically I call videos via plugincommand like this:

    Code:
        if(command === "playMovieUnblocked"){
        if (!$gameMessage.isBusy()) {
            var name = args[0];
            if (name.length > 0) {
                var ext = this.videoFileExt();
                Graphics.playVideo('movies/' + name + ext);
                // this.setWaitMode('videounblocked');
                unblockedvideo = true;
            }
            this._index++;
        }
    }

    so i am sorry but i am not familiar with the pixie methods described by you and we do not call them directly
    like this anywhere... Also I could not find any of those methods used in the rpg-core.js
  7. Jonforum
    #7 Source
    am sorry but you have to rethink the way you use the videos.
    I think when you call `Graphics.playVideo('movies/' + name + ext);`
    It load video! , and play before it cache.
    You have a lot of hacky way for setup this in rmmv and pixi and it related to a lot of issue.
    http://www.html5gamedevs.com/topic/...-in-rpg-maker-mv/?tab=comments#comment-233670

    If you are not able to do with pixijs, can you try to add a timeout before play in _onVideoLoad?
    Look in rpgmaker Core, and try hack the _onVideoLoad by add a timer from 100 to 1000 ms ?
    Am sorry am not a pro of rmmv.
    but tell me if this way can help ?

    PHP:
    Graphics._onVideoLoad = function() {
    setTimeout(() => { this._video.play(); }, 1000);
    this._updateVisibility(true);
    if (Utils.isMobileSafari()) {
        waitForLoading = false;
    }
};

    also try to remove this._video.play() and look if video play without this code ?
    If it play, you have a autoplay somewhere.
  9. skodone
    #9 Source
    Hey there!

    So ive been able to work on this a little more!
    I managed to update my project and therefore PIXI to version 4.5.4.!
    I turned off Autoplay and disabled the FPSmeter.

    now I am up and on to try to override the functions:
    Graphics._createVideo
    Graphics._onVideoLoad
    Graphics._playVideo
    Graphics._updateVideo
    Graphics._stopVideo

    and I am trying to implement @Jonforums loader and PIXI player on top of my game...

    Code:
            Graphics._createVideo = function() {
            this._video = document.createElement('video');
            this._video.id = 'GameVideo';
            this._video.style.opacity = 0;
            this._updateVideo();
            document.body.appendChild(this._video);
        };

        Graphics._onVideoLoad = function() {
            this._video.style.opacity = 1;
            this._canvas.style.opacity = 1;
              //const dataVideo = $Loader.Data2['comment3'].dataVideo; // use the video cache from loader
          const texture = PIXI.Texture.fromVideo( 'movies/comment3.webm', 1, void 0, false );
          const videoSprite = new PIXI.Sprite(texture);
          const videoControler = texture.baseTexture.source;

          videoSprite.width = 288;
          videoSprite.height = 192;

          videoControler.currentTime = 5; // jump for debug only
          videoControler.onended = () => {
                    console.log("successfully played video");
                    this._video.style.opacity = 0;
          }

          var videoContainer = document.getElementById("GameVideo");
              videoContainer.style.opacity = 1;
              videoContainer.addChild(videoSprite);
          this.videoControler = videoControler;
          videoControler.play();
        };

        Graphics._playVideo = function(src) {
                this._video.src = src;
            this._video.onloadeddata = this._onVideoLoad.bind(this);
            this._video.onerror = this._videoLoader;
            this._video.onended = this._onVideoEnd.bind(this);
            this._video.load();
            this._videoLoading = true;
        };

    Graphics._updateVideo = function() {
        this._video.width = 288;
        this._video.height = 192;
        this._video.style.zIndex = 2;
        var element = this._video;
        var width = Math.floor(element.width * this._realScale);
        var height = Math.floor(element.height * this._realScale);
        element.style.position = 'absolute';
        element.style.top = 0;
        element.style.left = 0;
        element.style.right = 0;
        element.style.bottom = 0;
        element.style.width = width + 'px';
        element.style.height = height + 'px';
    };

    this is my code so far... The problem im facing now is, that since _video is an html "video" element it does not seem to be
    compatible with the PIXI videosprite and addChild(videoSprite) fails (is not a function).
    (also the $loader is not working? Is this a PIXI specific function or where was it declared @Jonforum?)
    So my question is... what do i append the PIXI video container to? Do i have to create another PIXI.Application on top of my game on video create?

    thanks guys :)