Предаване на входен видео файл към p5js Canvas

Опитвам се да използвам 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; 

}

javascript html upload html5-video p5.js
person zoltana    schedule 19.05.2020    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Осъзнах, че трябва да използвам hide() на видео елемента и след това да осигуря начин за „възпроизвеждане“ на елемента в 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);
        $("#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; 

}
person zoltana    schedule 19.05.2020