p5.js MediaElement speed()用法及代碼示例

p5.js中p5.MediaElement的speed()方法用於設置或返回媒體元素的當前播放速度。它接受一個參數，該參數表示要用於媒體播放的速度倍增器。值為2.0將以兩倍的速度播放媒體，值為0.5將以一半的速度播放媒體。還可以指定負值來反向播放媒體，但是，並非所有瀏覽器都正確支持負值。

可以通過不向函數傳遞任何參數來返回媒體的當前播放速度。

用法:

speed( speed )

參數：此方法接受如上所述和以下描述的單個參數：

speed:它是一個數字，指定要用於播放速度的乘數。它是一個可選參數。

返回值：此方法返回一個Number，該Number表示媒體元素的當前播放速度。

以下示例說明了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 sped 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

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.MediaElement speed() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。