将视频文件输入传递到p5js画布

Question

我正在尝试使用Bootstrap创建更漂亮的界面来上传视频文件，而不是p5js的“ createFileInput（）”函数。我想要p5js中的视频，以便可以在其上叠加动画。由于某种原因，我的代码在使用函数“ createVideo”后立即将视频显示两次，并且如果我尝试隐藏作为画布外部第二个视频的DOM，它将从p5js画布中消失。这是我的代码：

var view = {
    vid: "",   
    cHeight: 500, 
    cWidth: 700, 
    xVid: 0, 
    yVid: 0, 
};

function setup() {
    let cnv = createCanvas(view.cWidth, view.cHeight);
    cnv.id("p5jsCanvas"); 
}

function draw() {
    if (view.vid) {
        // We have an uploaded video so draw it
        //background(0);
        console.log(view.vid.id()); 
        image(view.vid, view.xVid, view.yVid);
    } else {
        background(0); 
    }
}

$("#videoFileUpload").on("change", function() {
    var fileName = $(this).val().split("\\").pop();
    $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
    if (this.files && this.files[0]) {
        console.log(this.files[0]);
        var fileLocation = URL.createObjectURL(this.files[0]); 
        console.log(fileLocation);
        view.vid = createVideo([fileLocation], resizeVid);
        view.vid.id("poseVid");
    }

});


function resizeVid(){
  // If the height is greater than the width use the height to scale and AUTO for the width
  if (view.vid.height > view.vid.width){
    console.log("height > width");
    view.vid.size(AUTO, cHeight);
  } else { // Else if the width is greater than or equal to the height use the width to scale and AUTO for the height
    view.vid.size(view.cWidth, AUTO);
  } 

  // Reset location of the  video
  let currW = $("#poseVid").attr('width');
  let currH = $("#poseVid").attr('height'); 
  view.xVid = (view.cWidth - currW)/2; 
  view.yVid = (view.cHeight - currH)/2; 

}

Answer 1

var view = {
    vid: "",   
    cHeight: 500, 
    cWidth: 700, 
    xVid: 0, 
    yVid: 0, 
};

function setup() {
    let cnv = createCanvas(view.cWidth, view.cHeight);
    cnv.id("p5jsCanvas"); 
}

function draw() {
    if (view.vid) {
        // We have an uploaded video so draw it
        //background(0);
        console.log(view.vid.id()); 
        image(view.vid, view.xVid, view.yVid);
    } else {
        background(0); 
    }
}

$("#videoFileUpload").on("change", function() {
    var fileName = $(this).val().split("\\").pop();
    $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
    if (this.files && this.files[0]) {
        console.log(this.files[0]);
        var fileLocation = URL.createObjectURL(this.files[0]); 
        console.log(fileLocation);
        $("#poseVid").remove(); // ADDED
        view.vid = createVideo([fileLocation], resizeVid);
        // view.vid.id("poseVid"); // MOVED TO resizeVid function
    }

});
// ADDED FUNCTION JUST TO TEST THE PLAYBACK
function mousePressed() {
     view.vid.loop(); // set the video to loop and start playing
}

function resizeVid(){
  // If the height is greater than the width use the height to scale and AUTO for the width

  view.vid.id("poseVid"); //MOVED INTO THIS FUNCTION
  $("#poseVid").hide(); //ADDED

  if (view.vid.height > view.vid.width){
    console.log("height > width");
    view.vid.size(AUTO, cHeight);
  } else { // Else if the width is greater than or equal to the height use the width to scale and AUTO for the height
    view.vid.size(view.cWidth, AUTO);
  } 

  // Reset location of the  video
  let currW = $("#poseVid").attr('width');
  let currH = $("#poseVid").attr('height'); 
  view.xVid = (view.cWidth - currW)/2; 
  view.yVid = (view.cHeight - currH)/2; 

}