Why loadVideo() is not available?

p5.js Beginners
1

Hi there
We can deal with an image using loadImage() and also using createImg().
However, in case of video, we can use createVideo() but “loadVideo()” is not available.
It seems to be inconsistent.
Is there any reason not to support loadVideo()?
Could anyone help me to understand that?

Thanks

1 Like
2

hi! welcome to the forum!

loadImage and createImg are actually completely different functions. loadImage actually fetches the image from web, and stores the pixels in JavaScript (kind of). You can use it to draw on canvas, but you cannot use it in the other parts of the webpage. createImg is to make an <image> object on the webpage (like the Processing logo on this page). You can use this object within the canvas and also you can move it around outside the canvas.

The case of the video is somewhat tricky. Videos have so many formats and you cannot simply store the pixels. Also some videos are huge (more than a gigabyte) so it’s not realistic to load the whole thing in preload. That’s why p5.js uses the browser’s power to optimize loading the video, which is to create a <video> object using createVideo.

4 Likes
3

Thanks,
It’s interesting point.

Also some videos are huge (more than a gigabyte) so it’s not realistic to load the whole thing in preload.

I think it depends on applications.
In case of a game, application might want to wait for loading some videos (might be short videos) for game objects (e.g. splits) before starting the game.

4

I understand but that’s not my point. p5.js (or client side JavaScript in general) cannot live without a browser. And p5.js uses browser features to load video. You may be able to go around by using webassembly to load videos, but I guess you don’t need it (and you shouldn’t) in most cases. I hope it helps.

5

Hi,
Thanks.
Can I expect setup() to be called after finishing loading a video when createVideo() is called in preload()?

let video;
function preload(){
  video = createVideo("foo.mp4");
}
function setup(){
  print("loading done");
  video.loop();
}
6

I don’t think so because createVideo creates a video element. You need to look into video API on MDN because, again, it is not implemented in p5.js but it’s about the web API.

Video is loaded “on demand” so for example, loadeddata is already triggered when the current frame is loaded (not the entire video). canplaythrough seems to be the closest but I don’t know if it guarantees that the entire data is loaded or it predicts that the data will be loaded with the current bandwidth.

1 Like
7

Thanks.
It’s very clear.