Передача ввода видеофайла в холст p5js

Я пытаюсь использовать 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