pixijs 中的视频纹理循环答案

【问题标题】：video texture loop in pixijspixijs 中的视频纹理循环
【发布时间】：2015-08-20 11:46:48
【问题描述】：

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

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

【问题讨论】：

标签： html video html5-canvas pixi.js

【解决方案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 ...
}

【讨论】：