Pixi.js: 如何检测电影结束(结束事件的回调?)
Pixi.js: How to Detect end of movie (callback for ended event?)
我有一个项目需要在浏览器中切换全高清视频。我意识到我的 macbooks 风扇在一段时间后开始吹了。我的假设是视频负载对于我的浏览器来说有点太重了,所以我决定尝试 Pixi.js - 希望我的 GPU 可以处理视频,因为我在 webgl 上下文中。如果一开始就错了,我们可以在这里中止。
不管怎样,我的问题是:
我加载了一个电影文件作为纹理,我需要切换回另一部电影,无论何时结束。
我试图找到一些文档,但到目前为止我还没有找到任何回调事件。有none吗?我是否必须手动添加视频的总时间然后检查
videoTexture.baseTexture.source.currentTime
?
到目前为止,我在这样的视频之间切换:
我有两个不同的视频纹理和精灵:
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;
}
但正如我所说,我现在需要检测视频 2 何时结束并切换回视频 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 or more specifically 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
中描述的其他events/properties等
我有一个项目需要在浏览器中切换全高清视频。我意识到我的 macbooks 风扇在一段时间后开始吹了。我的假设是视频负载对于我的浏览器来说有点太重了,所以我决定尝试 Pixi.js - 希望我的 GPU 可以处理视频,因为我在 webgl 上下文中。如果一开始就错了,我们可以在这里中止。
不管怎样,我的问题是: 我加载了一个电影文件作为纹理,我需要切换回另一部电影,无论何时结束。
我试图找到一些文档,但到目前为止我还没有找到任何回调事件。有none吗?我是否必须手动添加视频的总时间然后检查
videoTexture.baseTexture.source.currentTime
?
到目前为止,我在这样的视频之间切换:
我有两个不同的视频纹理和精灵:
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;
}
但正如我所说,我现在需要检测视频 2 何时结束并切换回视频 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 or more specifically 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
中描述的其他events/properties等