p5.MediaElement speed() 方法

p5.js 中 p5.MediaElement 的speed() 方法用于设置或返回媒体元素的当前播放速度。它接受一个参数，该参数表示用于媒体播放的速度倍数。值为 2.0 将以双倍速度播放媒体，值为 0.5 将以一半速度播放。也可以指定负值来反向播放媒体，但是，它可能不被所有浏览器正确支持。

不向函数传递任何参数即可返回媒体的当前播放速度。

句法：

speed( speed )

参数：此方法接受如上所述和如下所述的单个参数：

• speed：它是一个数字，指定用于播放速度的乘数。它是一个可选参数。

返回值：此方法返回一个数字，表示媒体元素的当前播放速度。

下面的例子说明了 p5.js 中的speed() 方法：

示例 1：

Javascript

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);
}

输出：

示例 2：

Javascript

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);
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5.MediaElement/speed