import * as ecs from "@8thwall/ecs";
ecs.registerComponent({
name: "Video Autoplay",
schema: {
background: ecs.eid,
playbackImage: ecs.eid,
},
schemaDefaults: {},
data: {},
stateMachine: ({ world, eid, schemaAttribute }) => {
const toPause = ecs.defineTrigger();
const toPlaying = ecs.defineTrigger();
ecs
.defineState("setup")
.initial()
.listen(eid, ecs.events.VIDEO_CAN_PLAY_THROUGH, () => {
toPlaying.trigger();
})
.onTrigger(toPlaying, "playing");
ecs
.defineState("playing")
.onEnter(() => {
const { background, playbackImage } = schemaAttribute.get(eid);
// Autoplay video
ecs.VideoControls.set(world, eid, {
paused: false,
});
// Fade out controls UI
ecs.Ui.mutate(world, background, cursor => {
cursor.backgroundOpacity = 0;
});
ecs.Ui.mutate(world, playbackImage, cursor => {
cursor.image = "assets/icons/pause-button.png";
cursor.opacity = 0;
});
})
.onTick(() => {
const { background, playbackImage } = schemaAttribute.get(eid);
ecs.Ui.mutate(world, background, cursor => {
cursor.backgroundOpacity = Math.max(
0,
cursor.backgroundOpacity - 0.05
);
});
ecs.Ui.mutate(world, playbackImage, cursor => {
cursor.opacity = Math.max(0, cursor.opacity - 0.05);
});
})
.listen(eid, ecs.input.SCREEN_TOUCH_START, () => {
toPause.trigger();
})
.onTrigger(toPause, "paused");
ecs
.defineState("paused")
.onEnter(() => {
const { background, playbackImage } = schemaAttribute.get(eid);
ecs.Ui.mutate(world, background, cursor => {
cursor.backgroundOpacity = 0.5;
});
ecs.Ui.mutate(world, playbackImage, cursor => {
cursor.image = "assets/icons/play-button.png";
cursor.opacity = 1;
});
ecs.VideoControls.set(world, eid, {
paused: true,
});
})
.listen(eid, ecs.input.SCREEN_TOUCH_START, () => {
toPlaying.trigger();
})
.onTrigger(toPlaying, "playing");
},
});
From this code, I adapted from Studio: Video to make the video autoplay
But I have a video inside Image Target, and I have multiples of them, but it only plays the first video
How can I make it autoplay all the videos