Loading Video from URL?

p5.js Coding Questions
1

hello.
Im trying to create a Video with createVideo() from a youtube URL. In order to draw it on a canvas later on. Is this possible?

I saw something like this “URL.createObjectURL”. Is this pointing in the right direction?

Thank you very much in advance =)

2

Can you post a small example sketch that shows your approach?
It is nearly impossible to say otherwise…

3 
var movie;
var canvas;
var playButton;
var playPressed = false;

var inputName;
var playingInThisMoment = false;
var movieEvents;
var inputField;
var submitButton;
var movieInput;

function setup() {
   
    inputField = createInput("insert url to video").addClass("urlInput");
    submitButton = createButton("submit").addClass("button");

    submitButton.mousePressed(submitFile);
    createP("drag your file here")
  
}

function draw() {

    if (playingInThisMoment) {
        movie.loadPixels();
        verticalS(...somecode...);

    } else if (!playingInThisMoment) {
        return;
    }
}

function playVideo() {
    if (playPressed) {
        movie.pause();
        playingInThisMoment = false;
        playButton.html("play");
    } else if (!playPressed) {
        playingInThisMoment = true;
      
        playButton.html("pause");
    }

    playPressed = !playPressed;
}


function submitFile() {
    if (!!inputField.value() && inputField.value() != "insert url to video") {
        movieInput = inputField.value();

        console.log(movieInput);

        //------>here getFile(.....movieInput.....)    }   HERE IS MY PROBLEM: IT WORKS WITH A LOCAL FILE BUT NOT URL <<-------------//
}

function getFile(file) {
    pixelDensity(1);

    movie = createVideo(file.data).id("video");
    movie.size(movieWidth, movieHeight);

    movieEvents = document.getElementById("video");

    movieEvents.onplaying = function() {
        console.log("The audio is now playing");
        playingInThisMoment = true;
    };

    movieEvents.onwaiting = function() {
        console.log("Wait! I need to buffer the next frame");
        // playingInThisMoment = false;
    };

    canvas = createCanvas(movieWidth, movieHeight).stroke(0);

    playButton = createButton("play")
    playButton.mouseClicked(playVideo);
}
4

this code might not work now. because i erased quite few code. Hope it’s more understandable now