Pixi.js：如何检测电影结束（结束事件的回调？）

Question

我有一个项目需要在浏览器中切换全高清视频。我意识到我的 macbooks 粉丝在一段时间后开始流行。我的假设是视频负载对于我的浏览器来说有点太重了，所以我决定试一试Pixi.js——希望我的 GPU 可以处理视频，因为我在 webgl 上下文中。如果一开始就错了，我们可以在这里中止。

无论如何我的问题： 我将一个电影文件作为纹理加载，我需要切换回另一部电影，只要该电影结束。

我试图找到一些文档，但到目前为止我还没有找到任何回调事件。没有吗？我是否必须手动添加视频的总时间，然后检查 videoTexture.baseTexture.source.currentTime?

到目前为止，我正在像这样的视频之间切换：

我有两个不同的 videoTextures 和 Sprites：

const videoTexture1 = new PIXI.Texture.from('video1.mp4');
const videoSprite1 = new PIXI.Sprite(videoTexture1);
videoSprite1.loop = true;
app.stage.addChild(videoSprite1);

const videoTexture2 = new PIXI.Texture.from('video2.mp4');
const videoSprite2 = new PIXI.Sprite(videoTexture2);
videoSprite2.visible = false;
app.stage.addChild(videoSprite2);

然后我做：

playAndShow(videoTexture2, videoSprite2);
stopAndHide(videoTexture1, videoSprite1);

function playAndShow(texture, sprite) {
  sprite.visible = true;
  texture.baseTexture.source.currentTime = 0;
  texture.baseTexture.source.play();
}

function stopAndHide(texture, sprite) {
  texture.baseTexture.source.currentTime = 0;
  texture.baseTexture.source.pause();
  sprite.visible = false;
}

但正如我所说，我现在需要检测我的 video2 何时结束并切换回 video1。

提前感谢您在此问题上提供的任何帮助。 干杯

merc

Answer 1

见：https://www.html5gamedevs.com/topic/44283-play-video-in-pixi-v5/?tab=comments#comment-247009

    const texture = PIXI.Texture.from('data2/Video/intro/vidA1.webm');
    const videoSprite = new PIXI.Sprite( texture );
    /**@type {HTMLVideoElement}*/
    const videoControler = videoSprite.texture.baseTexture.source;

似乎videoSprite.texture.baseTexture.source 是https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement 或更确切地说是https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement

你可以使用：

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

或https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement中描述的其他事件/属性等