p5.js MediaElement addCue() Método

El método addCue() de p5.MediaElement de la biblioteca p5.js se usa para programar un determinado evento para que se active cada vez que un elemento multimedia alcance el punto de referencia especificado. Acepta una función de devolución de llamada que se puede usar para especificar qué acción debe tener lugar durante el evento. También se puede pasar un parámetro opcional a la función de devolución de llamada usando este método.

Sintaxis:

addCue( time, callback, value)

Parámetros: Esta función acepta tres parámetros como se mencionó anteriormente y se describe a continuación.

• tiempo: es un número que especifica el tiempo en segundos relativo al elemento multimedia después del cual se invocaría la función de devolución de llamada dada.
• callback: Es una función que sería llamada en el momento dado.
• valor: Es un objeto que se pasa como parámetro a la función de devolución de llamada. Es un parámetro opcional.

Valor devuelto: este método devuelve un número que denota el «id» de la señal añadida. Esto se puede utilizar para el acceso posterior o la eliminación de la señal.

Ejemplo 1: El siguiente ejemplo ilustra el método addCue() de la biblioteca p5.js.

function setup() {
  createCanvas(550, 400);
  textSize(18);
  
  text("The events in addCue() are called " +
       "according to the given time", 20, 20);
  
  example_media =
    createVideo("sample-video.mp4");
  example_media.size(426, 240);
  example_media.position(20, 60);
  example_media.showControls();
  
  // Using the addCue() method for specifying
  // the time that the callback function
  // would be called
  example_media.addCue(3, showTime,
                       example_media);
  example_media.addCue(5, showTime,
                       example_media);
  example_media.addCue(8, showTime,
                       example_media);
  example_media.addCue(10, showTime,
                       example_media);
}
  
function showTime(media) {
  
  // Set a random background color
  r = random(255);
  g = random(255);
  b = random(255);
  background(r, g, b);
  
  // Get the media element from the callback
  let mediaTime = media.time();
  
  text("The current time of the video is: " +
       mediaTime, 20, 340);
  
    text("The events in addCue() are called " +
       "according to the given time", 20, 20);
}

Producción:

Ejemplo 2:

let y = 0;
  
function setup() {
  createCanvas(550, 400);
  textSize(18);
  
  text("The addCue() function is called " +
       "according to the given time", 20, 20);
  
  example_media =
    createVideo("sample-video.mp4");
  example_media.size(426, 240);
  example_media.position(20, 60);
  example_media.showControls();
  
  // Using the addCue() method for specifying
  // the time that the callback function
  // would be called
  example_media.addCue(3, changePlaySpeed,
                       0.15);
  example_media.addCue(5, changePlaySpeed,
                       1.0);
  example_media.addCue(8, changePlaySpeed,
                       3.0);
}
  
function changePlaySpeed(amount) {
  
  // Get the amount from the callback
  example_media.speed(amount);
  
  text("The current speed of the video is: "
       + amount, 20, y + 340);
  
  y += 20;
}

Producción:

Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/ referencia/#/p5.MediaElement/addCue