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

您可以传递视频元素而不是网址。在视频上，您可以设置循环：

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中的视频纹理循环

1 个答案: