CODEWITHSUNDEEP
htmlvideohtml5-canvaspixi.js
Pavan K
Pavan K

Reputation: 4693

video texture loop in pixijs

I am able to load a video texture and render it using pixi 

   // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x66FF99);
    // create a renderer instance
    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
    // add the renderer's view element to the DOM
    document.body.appendChild(renderer.view);
    requestAnimFrame(animate);
    // create a video texture from a path
    var texture = PIXI.VideoTexture.fromUrl("output480.mp4");
    // create a new Sprite using the video texture (yes it's that easy)
    var moveSprite = new PIXI.Sprite(texture);
    // center the sprites anchor point
    moveSprite.anchor.x = 0.5;
    moveSprite.anchor.y = 0.5;
    // move the sprite to the center of the screen
    moveSprite.position.x = window.innerWidth/2;
    moveSprite.position.y = window.innerHeight/2;
    moveSprite.width = window.innerWidth;
    moveSprite.height = window.innerHeight;
    stage.addChild(moveSprite);
    function animate() {
        requestAnimFrame(animate);
        renderer.render(stage);
    }

However I would like to loop the video over and also be able to reset to start of the video at click of a button (tie the function to an event). how can I do this?

Upvotes: 2

Views: 4702

Answers (1)

user1693593
user1693593

Reputation:

You can pass it a video element instead of the url. On the video you can then set looping:

var video = document.createElement("video");
video.preload = "auto";
video.loop = true;              // enable looping
video.src = "output480.mp4";

PIXI.Texture.fromVideo(video);

If it doesn't start to play just add autoplay = true. You may have to load it asynchronously if PIXI doesn't handle this internally, just add:

var video = document.createElement("video");
video.preload = "auto";
video.loop = true;              // enable looping
//video.autoplay = true;        / if PIXI doesn't start it internally
video.oncanplay = addToPIXI;
video.src = "output480.mp4";

function addToPIXI() {
  PIXI.Texture.fromVideo(video);
  // continue from here ...
}

Upvotes: 2

Related Questions