Show video in each element with a specific css class

p5.js Coding Questions
1

I am looking for a way to show the same video in each div with a specific class and looked at different approaches, but I didn’t find a solution. It is not possible to pass a p5.Image as the content of a createDiv function, for instance.

Currently I have this, which makes a couple of divs with the class ‘.post’;

let posts = [
    `Why lose time on hating her. She knows that we're losing time`,
    `Why lose time on blaming her. You know she won't give a damn`,
    `I think you have bigger problems. You'd better tell me about those`,
    `Don't you think there is no tomorrow for the bloody things that you chose`
];
let myVideo;

function setup() {
    canvas = createCanvas(400, 300);
    posts.map(post => { return  createDiv(post).parent('#posts').class('post') } );
    myVideo = createCapture(VIDEO);
    myVideo.size = (80, 60);
    myVideo.hide();   
}

I want to insert the video capture after the text in each div with the class ‘.post’. Any tips for a good approach?

2

I’d suggest setting the video’s parent to the div you like, and don’t hide the video.
https://p5js.org/reference/#/p5.Element/parent

For multiplying them I’m not sure - can you simply createCapture multiple times?

1 Like
3

I think you have to hide the video. Otherwise it will show up at the end of the DOM.

With parent you can add a video to only one DOM element. Actually, what I want in the end is one video file playing multiple times on the screen synchronously. In that sense, using createCapture or createVideo multiple times is not really a good solution. It is easy to show the same video multiple times on the canvas by by doing something like

function setup() {
    canvas = createCanvas(400, 300);
    myVideo = createCapture(VIDEO);
    myVideo.size = (80, 60);
    myVideo.hide();  
}

function draw() {
    image(myVideo, 0, 0);
    image(myVideo, 200, 200);

}

However, I don’t find a way to draw the different instances of an image into a specific div. You can’t call parent() on image(). I also thought about using createGraphics, but again you will need to call image() to show something and you can’t bind that to multiple divs.

4

yes and no, depends on how you want to do it.

After all, what you draw with p5.js sketch ends up on a canvas element. canvas is just a DOM element and you cannot multiply the canvas within a sketch. If you want several canvases, you should check out instance mode. With that direction, you need to hide the video element and display the video using image on every canvas. You can attach this canvas to another div using parent.

However what I was suggesting is to open several videos as DOM elements. When createCapture or createVideo, it returns a DOM element (wrapped by p5, to be precise). They are independent of the canvas. You can attach them to another div by using parent function. This way, you can attach the element freely on the html page, but of course if you hide them, they will not appear on the page.

5

this is the idea I suggested using video dom:
https://editor.p5js.org/micuat/sketches/T5TS7T2fW

Instead, if you want separate canvas for each div, check out the instance mode I mentioned above and you can programmatically instantiate multiple sketches.

6

Thank you very much. I definitely misunderstood some things. This brings me much closer to my idea.

1 Like