composition/mix videos

diramazioni

Hello, I'm wondering if is possible to make a player that is able to mix/fade from one video to another.

jeremydouglass

@diramazioni -- Yes, video mixing / fading is possible.

People have written video mixers using Processing. For example:

1. An older example of the code for of a video mixer using a GUI library
2. The recently released Praxis Live 3 runs Processing code inside a software tool designed for live video mixing

If you are looking for something much simpler, one simple approach is to use tint() to fade video images in and out based on the time / a keypress. This works the same way with normal images and video images. Here are some past discussions of fading: 1 2

Here is an example sketch:

/**
 * VideoCrossFade
 * 2016-11-16 Jeremy Douglass - Processing 3.2.3
 * based on "Loop" Processing example sketch 
 *
 * - 640x360 short video file from "Loop" Processing example sketch
 * - 640x360 short video file from http:// www.sample-videos.com/index.php#sample-mp4-video
 **/

import processing.video.*;

Movie movie;
Movie movie2;
int fadeStartTime = 0;
int fadeDuration = 3000; // 3 seconds

void setup() {
  size(640, 720);
  textAlign(CENTER,CENTER);

  // Load and play each video in a loop
  movie = new Movie(this, "transit.mov");
  movie.loop();
  movie.volume(0);
  movie2 = new Movie(this, "SampleVideo_640x360_1mb.mp4");
  movie2.loop();
  movie2.volume(0);
}

void movieEvent(Movie m) {
  m.read();
}

void draw() {
  // clear screen
  background(0);

  // calculate fader level 0-255 based on time since last keypress
  float fader = map( millis()-fadeStartTime, 0, fadeDuration, 255, 0 );
  fader = constrain( fader, 0, 255 );

  if(fader < 255){
    // cross-fade movie image and display
    tint(255, 255-fader);
    image(movie, 0, 0, width, height/2);
  }

  if(fader > 0){
    // fade movie image and display
    tint(255, fader);
    image(movie2, 0, height/2, width, height);
  }

  // show it again in a mini monitor
  tint(255, 255);
  rect(-2, -2, 132, 76);
  tint(255, 255-fader);
  image(movie,  0, 0, 128, 72);
  tint(255, fader);
  image(movie2, 0, 0, 128, 72);


  text("Press space to reset cross-fade", width/2, height/2);
}

void keyPressed(){
  fadeStartTime = millis();
}

diramazioni

thanks very helpful reference!