Loading a video stored locally on the PC

#1

Hello ,
I am trying to load a video to the canvas which is stored locally . I went to the drop down menu and uploaded a small video , named test.mp4. I used the example code to run the video but i seem to get a blank screen . I am not sure if this is the right way to upload a video stored locally ,

let video ;
function setup() {
  createCanvas(400, 400);

  video = createVideo('test.mp4');
  
}

function draw() {
  background(220);
image(video, 150, 150);

 function mousePressed() {
  video.loop(); // set the video to loop and start playing
}

  
}
1 Like
#2

-a- i used my own files
as you not give the link
-b- download from internet and upload to /data/ ( learned about a 5mb limit )
-c- take the mousePressed out of draw loop
-d- use the onLoad function but not play
as you want click with mouse…and use loop

‘here’ it works:
https://editor.p5js.org/kll/sketches/HvnFi2gPc

i change your title to p5.js

1 Like
#3

Thank you so much ! It was a file of size 3mb and it worked .

#4

Hi,
I have a follow up question. if i have long videos that i need to load from the local drive (Bigger than 10 Mb). What is the best way to do so . Having a folder stored locally on the disk with many videos

#5

the 5mb limit has nothing to do with processing ( or p5.js )
only with the free learn account at p5js.org.

you use the word ‘local’ related to p5.js?

-a- besides that limited account at p5js.org

-b- if you want to test p5.js code can use
processing IDE ( p5.js mode ) and a sub /data/ for first test,
and then change the filename/path of the videos
to any other directory on your computer where more video files are.

-c- for a “production” installation you would need a server
and copy the p5.js libraries …
like all what you got when at p5js.org you press the download button

  • for home use any computer in your network
  • for web use a web-space account
    and if the video file are stored and served from that web space account
    you usually pay for the storage GB and the streaming GB.
#6

Hi just to understand it properly , you mean to say

a) To use processing IDE instead of using the web browser ?
b) Can i use for example in your code instead of var videofile = 'data/big_buck_bunny.ogv' use absolute file such as var videofile = 'file:///C:/personal/vidz/test.mp4';

Thanks for the other infos, i am trying to understand them one by one

#7

that is not correct wording, as

processing IDE ( p5.js mode )

again is using the browser ( for creating the canvas ) but run and load from your PC
so yes, you might be able to use a path ( filename from your local drive )

_ HOW TO ____________


test a example ( might need to close open IDE )