Loading a video stored locally on the PC


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() {
image(video, 150, 150);

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

1 Like

-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:

i change your title to p5.js

1 Like

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


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


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.

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


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 )