pixijs 中的视频纹理循环

Question

我能够加载视频纹理并使用 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);
    }

但是我想循环播放视频，并且还能够在单击按钮时重置为视频开始（将功能与事件相关联）。我怎样才能做到这一点？

Answer 1

您可以将视频元素传递给它而不是 url。然后您可以在视频上设置循环：

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

PIXI.Texture.fromVideo(video);

如果它没有开始播放，只需添加 autoplay = true。如果 PIXI 不在内部处理它，您可能必须异步加载它，只需添加：

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 ...
}

pixijs 中的视频纹理循环

video texture loop in pixijs

html

video

html5-canvas

pixi.js