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