trsh 8 Report post Posted May 20, 2020 I do something like this to loop trough video frame by frame: frameEl.onchange = function(e){ const frame = parseInt(e.target.value); videoEl.currentTime = e.target.value/fps; }; But the PIXI canvas is not updating. It updated only on `play`. Are there options? Quote Share this post Link to post Share on other sites
ivan.popelyshev 1074 Report post Posted May 20, 2020 according to https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/VideoResource.ts#L154 , every frame several operations are performed 1. video texture update 2. super update (BaseImageResource) 3. super-super (Resource) and without 3. it wont work because it wont raise dirty update id that TextureSystem will read later I think regular "texture.update()" should work the same way for you. Whatever you do - 1. debug whether baseTexture update id will raise 2. make sure your app structure is fine. https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop Quote Share this post Link to post Share on other sites
trsh 8 Report post Posted May 20, 2020 7 minutes ago, ivan.popelyshev said: according to https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/VideoResource.ts#L154 , every frame several operations are performed 1. video texture update 2. super update (BaseImageResource) 3. super-super (Resource) and without 3. it wont work because it wont raise dirty update id that TextureSystem will read later I think regular "texture.update()" should work the same way for you. Whatever you do - 1. debug whether baseTexture update id will raise 2. make sure your app structure is fine. https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop My setup is like const videoResource = new PIXI.resources.VideoResource(videoEl, { autoPlay: false, autoLoad: true, crossorigin: true }); const baseTexture = new PIXI.BaseTexture(videoResource, { mipmap: false }); const mediaTexture = new PIXI.Texture(baseTexture); const mediaSprite = new PIXI.Sprite(mediaTexture); app.stage.addChild(mediaSprite); What then I try todo is : frameEl.onchange = function(e){ const frame = parseInt(e.target.value); videoEl.currentTime = e.target.value/fps; mediaTexture.update(); }; But it doesn't work . I got lot's of black screens. Quote Share this post Link to post Share on other sites
ivan.popelyshev 1074 Report post Posted May 20, 2020 Strange, it should work. Wanna make a demo? Quote Share this post Link to post Share on other sites
trsh 8 Report post Posted May 20, 2020 (edited) 1 hour ago, ivan.popelyshev said: Strange, it should work. Wanna make a demo? I try, but then there is another issue , where PIXI is complaining about cross origin https://codepen.io/TrshMan/pen/GRpPQgm P.S. test it on FF, Chrome has issues with setting currentTime Edited May 20, 2020 by trsh Quote Share this post Link to post Share on other sites
trsh 8 Report post Posted May 20, 2020 Not sure why cross origin stuff. The video works in vanilla HTML+JS https://codepen.io/andryjohn/pen/xNWvdo Quote Share this post Link to post Share on other sites
trsh 8 Report post Posted May 20, 2020 2 hours ago, ivan.popelyshev said: Strange, it should work. Wanna make a demo? Alternatively can paste the below code in "https://pixijs.io/examples/#/sprite/video.js" and crank the numbers up in input. Only some frames will appear const app = new PIXI.Application(); document.body.appendChild(app.view); const fs = document.createElement('input'); fs.type = 'number'; fs.style.position = 'absolute'; fs.style.top = '0px'; fs.style.left = '0px'; document.body.appendChild(fs); const videoEl = document.createElement('video'); videoEl.preload = "auto"; videoEl.controls = true; videoEl.addEventListener("canplaythrough", function() { process(); }, {once : true}); videoEl.src = 'examples/assets/video.mp4'; function process(){ const videoResource = new PIXI.resources.VideoResource(videoEl, { autoPlay: false, autoLoad: true, crossorigin: true }); const baseTexture = new PIXI.BaseTexture(videoResource, { mipmap: false }); const mediaTexture = new PIXI.Texture(baseTexture); const mediaSprite = new PIXI.Sprite(mediaTexture); app.stage.addChild(mediaSprite); fs.onchange = function(e){ videoEl.currentTime = e.target.value; console.log(videoEl.currentTime); mediaTexture.update(); } } Quote Share this post Link to post Share on other sites
trsh 8 Report post Posted May 21, 2020 @ivan.popelyshev any ideas? Quote Share this post Link to post Share on other sites
ivan.popelyshev 1074 Report post Posted May 22, 2020 No idea so far, looks like some kind of async stuff, bideo cant just update frame fast. Also, I'm on vacation from pixies, and I want to see how fast other people can answer Quote Share this post Link to post Share on other sites
trsh 8 Report post Posted May 22, 2020 8 hours ago, ivan.popelyshev said: No idea so far, looks like some kind of async stuff, bideo cant just update frame fast. Also, I'm on vacation from pixies, and I want to see how fast other people can answer Pity. Not much other help here Quote Share this post Link to post Share on other sites
Rob Morris 2 Report post Posted May 23, 2020 Hey trsh, I took a peek. Verified that the dirty counter is updating properly, tried messing around with starting and stopping the underlying video to see if that would help. No dice. The problem seems to be some kind of race condition, where seeking the underlying video results in the data copy failing if performed too quickly. Change your sample's change handler to: fs.onchange = function(e){ videoEl.fastSeek(e.target.value); setTimeout(function() { baseTexture.update(); }, 100); } And it will work as expected. I'm not sure what the solution would be should you be wanting real-time response times, but at least this should help narrow down the problem. 1 trsh reacted to this Quote Share this post Link to post Share on other sites
themoonrat 105 Report post Posted May 23, 2020 I find that a video needs to be played for seeking to work in updating the video being watched. So try seeking, then a play, then a pause again. Quote Share this post Link to post Share on other sites
trsh 8 Report post Posted May 23, 2020 13 minutes ago, themoonrat said: I find that a video needs to be played for seeking to work in updating the video being watched. So try seeking, then a play, then a pause again. Doing pause right after play results in an error. Or how do u mean it? Quote Share this post Link to post Share on other sites