Tagged with createvideo() - Processing 2.x and 3.x Forum

P5JS - Problem with asynchronous video loading/playing

2sman — Sun, 20 Aug 2017 15:33:59 +0000

Hello, I am trying to select from an array of videos, play a video on button click (LEFT ARROW) and then after the video stops it hides the video and waits for button press to play another random video again. I've tried variations on adding in or removing hide() and stop() in the onended call. Nothing seems to work right. I'm wondering if this relates to this issue I've read elsewhere about asynchronous video calls. Though it seems different since I'm preloading my videos.

My simplified code is here: http://alpha.editor.p5js.org/full/Hy71uQP_b

Posts about asynchronous video load issues here

Save frames of a video in a grid

domm — Tue, 22 May 2018 15:35:39 +0000

Hey,

first, im really new to p5.js / processing. I just got a new book "creative coding in web", their is an example which will save frames of a video in a grid. My problem is, i dont get how the time measurement works, for me it seems to be really buggy. Everytime i run the sketch the result looks different. (Here is the example https://alpha.editor.p5js.org/generative-design/sketches/P_4_2_2_01)

It would be nice if anyone could help me out.

P5JS cueing video media elements

aldobranti — Fri, 10 Mar 2017 20:41:38 +0000

I cannot remove cues on video media elements and they stay around and mess up the ongoing behaviour of the code

Here's some code

/* * @name Video * @frame 710,250 * @description

p>Load a video with multiple formats and toggle between playing * and paused with a button press. *

To run this example locally, you will need at least * one video file, and the * p5.dom library.

*/ var playing = false; var fingers; var button; var a_cue;

function setup() { // specify multiple formats for different browsers fingers = createVideo(['assets/fingers.mov', 'assets/fingers.webm']); button = createButton('play'); button.mousePressed(toggleVid); // attach button listener a_cue = fingers.addCue( 2, cued, fingers); }

I would expect the call to the cued() callback to remove the cue and to prevent further calls into the c/b

Ultimately what I'm trying to do is to coordinate the parallel playback of two video streams and to use cuing to control the crossovers between

Mouse clicking and database questions?

ImJaz — Sat, 16 Sep 2017 03:19:10 +0000

Hi there! I've spent a long time trying to figure out how I can get my database and my mouse clicks to work. If someone could help me with it I would appreciate it so much. What I want to do is get the buttons on the side to individually have their own information from the database. When I use my mouse click command it goes on all three of the buttons but I want it to only work on one each. When you click on a button I wanted it to grab something from the database I've made so the first button would be the first bit in my database then where the database is spaced, that's for the second button. I'm quite confused on how to do this and my video is now not working as well (it's meant to tint to the jellyfish and it). If someone could help it would be great!

http://alpha.editor.p5js.org/Jaz/sketches/rkNRPAuqb

Adding two or more effects to seriously.js

1rulesupersedes — Sat, 01 Jul 2017 14:54:12 +0000

I want to add two or more effects to seriously.js I am not sure about the code. I can get one effect working but when I add the second they cancel each other out.

new_video.html

new_video.js

            var video;

            var canvas;

            var slider;



            function setup(){
                canvas = createCanvas(1920, 1080, WEBGL);
                canvas.id("p5canvas");
                background(51);
                video = createVideo("ratedg_permission_industrial_5.mp4");
                video.loop();
                video.id("test");   
                video.hide();

                var seriously = new Seriously();

                var src = seriously.source("#test");
                var target = seriously.target("#p5canvas");




                var  edge = seriously.effect("edge");
                edge.source = src;
                target.source =  edge;
                var r = 250 / 255;
                var g = 10 / 255;
                var b = 250 / 255;
                edge.screen = [r,g,b,1];

                var  exposure = seriously.effect("exposure");
                exposure.source = src;
                target.source =  exposure;
                seriously.go();
            }

Play animation in front of a video in the background.

Brenda — Sat, 13 May 2017 18:22:30 +0000

Hi there,

I've created an animation successfully in one program and loaded up a video separately in another program. I'm now trying to merge the two i.e. I want to play the animation in front of the video(have the video running in the background). I've tried lots of variations. I'm wondering does finger.loop() line stop the draw() method being called?? I'm stumped now:-)

Any help would be greatly appreciated.

I'm including the current problematic code below:

//Program to play animation in front of video.
//variable declarations

var fingers; //video
var sequenceAnimation;//name of completed animation
var mySprite1; //name of sprite
var canvas;//canvas

function preload() 
{

//on preload() the animation images are loaded into "sequenceAnimation"
sequenceAnimation = loadAnimation("capGuy/walk_0001.png", "capGuy/walk_0008.png");

} 

function setup() { 

    canvas = createCanvas(800, 800);
    canvas.style('z-index','1');
    canvas.position(50, 300);

    fingers = createVideo(['assets/glen.mov']);
    fingers.loop(); //is this stopping draw() being called? 
}

function draw() {
    mySprite1 = createSprite(300,578,650,960);
    mySprite1.addAnimation("walking", sequenceAnimation);
    scale(.93); //reduced the size
    mySprite1.velocity.x += .03
    drawSprites();

}

I want to display a video. The sound plays but the screen is blank.

Brenda — Thu, 27 Apr 2017 17:32:24 +0000

var fingers;

function setup() { createCanvas(1920, 1080); // specify multiple formats for different browsers fingers = createVideo(['assets/glen.mov']); //fingers.hide(); // by default video shows up in separate dom // element. hide it and draw it to the canvas // instead fingers.loop(); }

function draw() { background(150); image(fingers,10,10); // draw the video frame to canvas //filter('GRAY'); image(fingers,150,150); // draw a second copy to canvas }

How to embed server side web cam in processing or p5.js sketch

mikescle85 — Thu, 26 Jan 2017 14:30:17 +0000

I have a node server which serves a web page and p5.js canvas. I'd like a server side webcam to be embedded in the canvas. If you can point me in the right direction it would be very much appreciated.

Error on 'Video Pixels' example on P5JS Reference Page

edhebert — Thu, 17 Dec 2015 15:58:33 +0000

Hi-

I'm trying to better understand video manipulation, and think that an example in the P5JS Reference Guide can help me visualize what I need. However, this example is throwing an error to the console. i'm getting the JS error:

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

Can someone help me understand why this code isn't working?

Thanks!

create a 2D array of video objects - Uncaught TypeError

adellelin — Mon, 07 Dec 2015 06:38:39 +0000

I am trying to create a 2D array of video objects. The code works for a regular array however when turning it into a 2D I get the error - Uncaught TypeError: Cannot read property 'tv' of undefined. I think the issue is in this line of code but haven't been able to work it out: tvObjArray.push(new NewTvObj(createVideo(videoFiles[i][j]), false, 0, 0));

full code:

var tvObjArray = [[],[]];
var videoFiles = [
  ["videos/cityDream.mp4", "videos/cityDream.mp4"],
  ["videos/cityDream.mp4", "videos/cityDream.mp4"]
];

function setup() {
  createCanvas(1000, 576);
  // create a new tv object for each screen that needs to appear
  for (var i = 0; i < videoFiles.length; i++) {
    for (var j = 0; j < videoFiles[i].length; j++) {
      tvObjArray.push(
        new NewTvObj(createVideo(videoFiles[i][j]), false, 0, 0));
      tvObjArray[i][j].tv.loop();
      tvObjArray[i][j].tv.hide();
      tvObjArray[i][j].tv.pause();
    }
  }
}

function NewTvObj(tvObj, playingBool, xposVal, yposVal) {
  this.tv = tvObj;
  this.playing = playingBool;
  this.xpos = xposVal;
  this.ypos = yposVal;
}

function draw() {
  background(255, 100, 100);

  // locate tvs on building
  for (var i = 0; i < videoFiles.length; i++) {
    for (var j = 0; j < videoFiles[i].length; j++) {
  image(tvObjArray[i][j].tv, tvObjArray[i][j].xpos + i * 320, 
    tvObjArray[i][j].ypos + j * 200);
}

drawSprites();
  }
}

createVideo();

berenger — Wed, 25 Feb 2015 12:37:37 +0000

Hello everyone,

I am working on a website with p5.js, and I wanted to know a bit more about the createVideo() method.

First I would like to know if there is a way to force the controls to show up ? By default on chrome, controls won't show, I have to right click the video and toggle the 'display controls" element in the menu.

The second thing, is that I don't manage to include a video from youtube for example. Is there a way to do that ?