Low video quality using createVideo

p5.js Coding Questions
1

hey, I have a video.mp4 on my computer and I want to load it to a p5 sketch. this is the code:

let pause_vid = true;

function preload() {
  vid = createVideo("video.mp4");
}
function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
   vid.size(width, height);
   vid.volume(0);
   vid.hide(); // hides the html video loader
  vid.pause();
}
function draw() {
image(vid,0,0,width,height);
}
function mousePressed() {
  if (!pause_vid) {
    vid.pause();
  } else {
    vid.loop();
  }
  pause_vid = !pause_vid
}

everything is working fine, the problem is that the quality of the video in the browser is very low. (the original video is of good quality).
what can I do?
thanks :slight_smile:

2

Hi @Omri,

Can you post an original vs createVideo in the browser screenshot comparison of the quality you are seeing?

What is the resolution / codec of your video?

You can read more details about that here:

3

Hi @josephh

this is the video played on my computer on VLC:

image
image1917×939 206 KB

And this is from my sketch:
image
image1919×934 96.1 KB

The resolution is FHD (1920 X 1080)
it’s an mp4 file

4

Ok maybe try to remove this statement:

since you are then drawing your video with image(vid, 0, 0, width, height);…

1 Like
5

A M A Z I N G
Thank you!!

1 Like
6

Cool! :wink:

It may be because window.innerWidth and window.innerHeight are set after the setup() and so it was setting your resolution to a low value…