如何在p5.js中编写遍历视频数组的程序并应用seriously.js特效

• 原代码在循环创建视频时，仅将每次生成的视频实例赋值给单个临时变量q，没有存入数组存储，循环结束后仅能保留最后一个视频的引用，无法遍历全部视频
• 未配置视频自动播放、隐藏原生控件等属性，视频无法正常显示播放
• 绘制函数中没有添加视频渲染逻辑，画布不会输出视频内容

let vid1 = 'footb1.mp4';
let vid2 = 'footb3.mp4';
let vid3 = 'futball1.mp4';
// 存储视频路径的数组
const videoSources = [vid1, vid2, vid3];
// 存储创建完成的视频对象的数组
const videoList = [];

function preload() {
  for (let j = 0; j < videoSources.length; j++){
    // 将创建的视频对象存入数组，方便后续遍历加效果
    const currentVid = createVideo(videoSources[j]);
    videoList.push(currentVid);
  }
}

function setup() {
  createCanvas(640,480, WEBGL);
  // 遍历配置所有视频
  for (let vid of videoList) {
    vid.muted(true); // 浏览器要求静音才能自动播放
    vid.loop(); // 循环播放
    vid.hide(); // 隐藏视频原生控件，只在canvas绘制输出
  }
}

function draw() {
  background(220);
  // 示例：遍历绘制所有视频，横向排列
  for (let i = 0; i < videoList.length; i++) {
    // 每个视频宽度200，间隔20，调整坐标适配WEBGL坐标系
    image(videoList[i], -300 + i * 220, -120, 200, 240);
  }
}

• 可直接遍历videoList数组的每个视频元素，逐一绑定seriously.js的效果节点即可
• 如果需要切换不同视频的效果，直接通过数组下标定位对应视频操作即可

内容的提问来源于stack exchange，提问作者paul