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

p5.js庫的p5.MediaElement的onended()方法用於安排給定的函數，該函數將在音頻或視頻結束時被調用。如果media元素正在循環，則不會調用此回調。該媒體元素作為參數傳遞給回調。

用法:

onended( callback )

參數：該函數接受如上所述和以下描述的單個參數。

callback:該函數指定媒體結束時的回調函數。

以下庫包含在HTML文件的“head”部分中，以使JavaScript函數起作用。

<script src=”p5.Image.js”></script>
<script src=”p5.min.js”></script>

以下示例說明了p5.js庫中的onended()方法

例：

Javascript

function setup() { 
    createCanvas(550, 300); 
    textSize(18); 
  
    text("The onended() function would " + 
         "be called when the video ends", 
         20, 20); 
  
    example_media = 
      createVideo("sample-video.mp4"); 
    example_media.size(300, 150); 
    example_media.position(20, 60); 
  
    playBtn = createButton("Play Button"); 
    playBtn.position(30, 220); 
    playBtn.mousePressed(() => { 
  
      example_media.play(); 
    }); 
  
    // Using the onended() method 
    example_media.onended(onendedShow); 
} 
  
function onendedShow(mediaElem) { 
  
  // Get the media element from the callback 
  let mediaSource = mediaElem.src; 
  
  text("The media has ended playback!", 
       20, 260); 
  text("The source of the video is:" + 
       mediaSource, 20, 280); 
}

輸出：

在線編輯： https://editor.p5js.org/
環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
參考：https://p5js.org/reference/#/p5.MediaElement/onended

相關用法

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