使用Pixi.js 5.2.1循环和自动播放视频
使用Pixi.js 5.2.1循环和自动播放视频
提问于 2020-03-27 06:26:00
我正在尝试使用Pixi.js@5.2.1实现自动播放和视频循环(参见下面的代码)-我的问题是: bg.baseTexture.source.loop = true；-返回一个未捕获的TypeError -虽然autoplay方法可以工作，但由于某种原因baseTexture.source.loop方法不能工作。感谢您查看此问题。最新版本的Pixi.js是否改变了- baseTexture.source.loop的调用方式？感谢您的意见和帮助！
下面是我的代码：
createBackgrounds() {
this.bgArray.map((video) => {
// create a video texture from a path
const bg = PIXI.Texture.from(`../assets/video/${video}.mp4`);
//assigning the texture to baseTexture.source.loop to loop video - and returns uncaught TypeError??
bg.baseTexture.source.loop = true;
const videoSprite = new PIXI.Sprite(bg);
videoSprite.anchor.x = 0.5;
videoSprite.anchor.y = 0.5;
// preload and autoplay video
videoSprite.preload = 'auto';
this.autoPlay = videoSprite.autoplay;
this.imgContainer.addChild(videoSprite);
this.bgSpriteArray.push(videoSprite);
// IMAGE
videoSprite.alpha = this.bgSpriteArray.length === 1 ? 1 : 0;
});
}```
``` Uncaught TypeError: Cannot set property 'loop' of undefinedat jello.js:199at Array.map (<anonymous>)at Jello.createBackgrounds (jello.js:194) ```回答 1
Stack Overflow用户
发布于 2020-03-28 01:59:12
baseTexture.resource.source.loop是答案-- https://github.com/pixijs/pixi.js/issues/6501 --
实现了自动播放和视频循环：
createBackgrounds() {
this.bgArray.map((video) => {
// const bg = PIXI.AnimatedSprite.from(`../assets/video/${video}.mp4`);
// bg.baseTexture.resource.source.loop = true;
// // Set image anchor to the center of the image
// bg.anchor.x = 0.5;
// bg.anchor.y = 0.5;
// bg.loop = true;
// this.imgContainer.addChild(bg);
// this.bgSpriteArray.push(bg);
// // IMAGE
// bg.alpha = this.bgSpriteArray.length === 1 ? 1 : 0;
// create a video texture from a path
const bg = PIXI.Texture.from(`../assets/video/${video}.mp4`);
// https://github.com/pixijs/pixi.js/issues/6501 - SOLVED!!
bg.baseTexture.resource.source.loop = true;
const videoSprite = new PIXI.Sprite(bg);
videoSprite.anchor.x = 0.5;
videoSprite.anchor.y = 0.5;
// preload and autoplay video
videoSprite.preload = 'auto';
this.autoPlay = videoSprite.autoplay;
this.imgContainer.addChild(videoSprite);
this.bgSpriteArray.push(videoSprite);
// IMAGE
videoSprite.alpha = this.bgSpriteArray.length === 1 ? 1 : 0;
});
}```页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60877121
复制相关文章
相似问题
腾讯云开发者
