p5.js | función createVideo()

La función createVideo() se usa para crear un elemento de video en el DOM. El video se crea como p5.MediaElement, que tiene métodos para controlar los medios y su reproducción.

Sintaxis:

createVideo(src, callback)

Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

src: es una string que especifica la ruta del archivo de video. También se puede usar una array de strings para especificar múltiples rutas para admitir diferentes navegadores.
devolución de llamada: es una función de devolución de llamada que se activará cuando se active el evento ‘canplaythrough’ . Este evento se activa cuando el video ha terminado de cargarse y no requiere ningún almacenamiento en búfer adicional. Es un parámetro opcional.

Valor de retorno: Devuelve un puntero al p5.MediaElement con el video.

Los siguientes ejemplos ilustran la función createVideo() en p5.js:

Ejemplo 1:

function setup() {
  createCanvas(300, 300);
  text("Click on the buttons below to"+
       " play/pause the video", 20, 20);
  
  vidElement = createVideo("sample_video.mp4");
  vidElement.position(20, 0);
  vidElement.size(300);
  
  playBtn = createButton("Play Video");
  playBtn.position(30, 40);
  playBtn.mouseClicked(playVideo);
  
  pauseBtn = createButton("Pause Video");
  pauseBtn.position(150, 40);
  pauseBtn.mouseClicked(pauseVideo);
}
  
function playVideo() {
  vidElement.play();
}
  
function pauseVideo() {
  vidElement.pause();
}

Producción:
reproducir-pausar-video

Ejemplo 2:

function setup() {
  createCanvas(300, 300);
  text("Loading the video...", 20, 20);
  
  vidElement = createVideo("sample_video.mp4", afterLoad);
  vidElement.position(20, 20);
  vidElement.size(300);
}
  
function afterLoad() {
  text("The video has finished loading and will"+
                           " now play!", 20, 40);
  vidElement.play();
}

Producción:

callback-video