Pixi.js:如何检测电影结尾(结束事件的回调?)

问题描述 投票:0回答:1

我有一个项目,需要在浏览器中的全高清视频之间切换。我意识到一段时间后我的Macbook迷开始大发雷霆。我的假设是视频负载对我的浏览器来说太重了,所以我决定尝试一下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

javascript events video callback pixi.js
1个回答
0
投票

参见: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.sourcehttps://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中描述的其他事件/属性等>

© www.soinside.com 2019 - 2024. All rights reserved.