Pixi. js: Как определить конец mov ie (обратный вызов для завершенного события?) - PullRequest
Новая
       33

Pixi. js: Как определить конец mov ie (обратный вызов для завершенного события?)

1 голос
/ 14 января 2020

У меня есть проект, в котором мне нужно переключаться между видео Full HD в браузере. Я понял, что мои поклонники macbooks начинают дуть через некоторое время. Я предположил, что загрузка видео слишком велика для моего браузера, поэтому я решил попробовать Pixi. js - с надеждой, что мой графический процессор сможет обрабатывать видео, потому что я нахожусь в Вебгл контекст. Если это, во-первых, неправильно, мы можем здесь прервать.

В любом случае мой вопрос: я загружаю файл mov ie в качестве текстуры, и мне нужно переключаться обратно на другой mov ie всякий раз, когда это одна закончилась.

Я попытался найти какую-то документацию, но пока не нашел никаких событий обратного вызова. Там нет ни одного? Нужно ли вручную добавлять общее время видео, а затем сравнивать с 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;
}

Но, как я уже сказал, теперь мне нужно определить, когда закончилось мое видео2, и переключиться обратно на видео1.

Спасибо Заранее вам за любую помощь по этому вопросу. Ура

мер c

1 Ответ

1 голос
/ 14 января 2020

См .: 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

Вы можете использовать:

или другие события / свойства и т.д. c, описанные в https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

...