Método p5.MediaElement speed()

El método speed() de p5.MediaElement en p5.js se usa para establecer o devolver la velocidad de reproducción actual del elemento multimedia. Acepta un solo parámetro que denota el multiplicador de velocidad que se utilizará para la reproducción de medios. Un valor de 2,0 reproduciría el medio al doble de velocidad y un valor de 0,5 lo reproduciría a la mitad de la velocidad. También se pueden especificar valores negativos para reproducir los medios en reversa, sin embargo, es posible que no todos los navegadores lo admitan correctamente.

La velocidad de reproducción actual de los medios se puede devolver al no pasar ningún parámetro a la función.

Sintaxis:

speed( speed )

Parámetros: este método acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:

• velocidad: Es un número que especifica el multiplicador que se utilizará para la velocidad de reproducción. Es un parámetro opcional.

Valor de retorno: este método devuelve un número que indica la velocidad de reproducción actual del elemento multimedia.

Los siguientes ejemplos ilustran el método speed() en p5.js:

Ejemplo 1:

function setup() {
    createCanvas(500, 400);
    textSize(20);
 
    text("Click on the buttons to slow " +
         "or speed up the video", 20, 20);
 
    example_media =
      createVideo("sample-video.mp4");
    example_media.size(500, 300);
    example_media.position(20, 100);
 
    example_media.showControls();
 
    slowBtn =
      createButton("Slow Down Video");
    slowBtn.position(30, 40);
    slowBtn.mousePressed(slowVideo);
 
    fastBtn =
      createButton("Speed Up Video");
    fastBtn.position(160, 40);
    fastBtn.mousePressed(speedVideo);
 
    text("The video is playing at normal speed",
         20, 80);
}
 
function slowVideo() {
  clear();
 
  // Slow down the video to 0.3 times
  // of the normal the speed
  example_media.speed(0.3);
 
  text("The video is now slowed down",
       20, 80);
 
  text("Click on the buttons to slow " +
       "or speed up the video", 20, 20);
}
 
function speedVideo() {
  clear();
 
  // Speed up the video to two times
  // the speed
  example_media.speed(2.0);
 
  text("The video is now speed up",
       20, 80);
 
  text("Click on the buttons to slow " +
       "or speed up the video", 20, 20);
}

Producción:

Ejemplo 2:

function setup() {
  createCanvas(500, 400);
  textSize(20);
 
  text("Move the slider to speed up " +
       "or slow down the video", 20, 20);
 
  example_media =
    createVideo("sample-video.mp4");
  example_media.size(500, 300);
  example_media.position(20, 80);
 
  example_media.showControls();
 
  speedSlider =
    createSlider(0.1, 3.0, 1.0, 0.1);
  speedSlider.position(20, 40);
  speedSlider.input(changeSpeed);
}
 
function changeSpeed() {
  clear();
 
  let speedVal = speedSlider.value();
 
  // Set the media speed to the slider value
  example_media.speed(speedVal);
 
  // Get current playback speed
  let currSpeed = example_media.speed();
 
  text("Move the slider to speed up or " +
       "slow down the video", 20, 20);
  text("Video is playing at speed: " +
       currSpeed, 20, 80);
}

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/velocidad