p5.js MediaElement removeCue()用法及代码示例

p5.js中p5.MediaElement的removeCue()方法用于从媒体元素中删除指定的提示。 addCue()方法返回的ID用于标识要删除的提示。

用法:

removeCue( id )

参数：该函数接受如上所述和以下描述的单个参数：

id:它是一个数字，指定由addCue方法返回的提示的ID。

以下示例说明了p5.js中的removeCue()方法：

范例1：

Javascript

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.speed(2.0); 
  example_media.showControls(); 
  
  rmvBtn =  
    createButton("Remove Cue"); 
  rmvBtn.position(20, 320); 
  rmvBtn.mousePressed(removeCues) 
  
  // Using the addCue() method for scheduling 
  // the given callback functions 
  cue_id = 
    example_media.addCue(3, changeColor); 
} 
  
function removeCues() { 
  
  clear(); 
  
  // Remove the cue associated with 
  // the given ID 
  example_media.removeCue(cue_id); 
  
  text("Given cue removed!", 20, 360); 
  
  text("The removeCue() method removes " + 
       "the given cue", 20, 20); 
} 
  
function changeColor() { 
  
  // Set a random background color 
  r = random(100, 200); 
  g = random(100, 200); 
  b = random(100, 200); 
  background(r, g, b); 
  
  text("Background Color Changed!", 
       20, 360); 
  
  text("The events in addCue() are " + 
       "called according to the given time", 
       20, 20); 
}

输出：

范例2：

Javascript

let y = 0; 
  
function setup() { 
  createCanvas(550, 450); 
  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.speed(1.5); 
  example_media.showControls(); 
  
  rmvBtn =  
    createButton("Remove Cue"); 
  rmvBtn.position(20, 320); 
  rmvBtn.mousePressed(removeCues) 
  
  // Using the addCue() method for scheduling 
  // the given callback functions 
  id1 = example_media.addCue(2, showCueNo, 1); 
  id2 = example_media.addCue(4, showCueNo, 2); 
  id3 = example_media.addCue(6, showCueNo, 3); 
  id4 = example_media.addCue(8, showCueNo, 4); 
} 
  
function removeCues() { 
  
  clear(); 
  
  // Remove the cue associated with 
  // the given ID 
  example_media.removeCue(id1); 
  example_media.removeCue(id3); 
  
  text("Given cues removed using the " + 
       "removeCue() method", 20, 20); 
    
  y = 0; 
} 
  
function showCueNo(cue_no) { 
  
  text("This is cue number:" + cue_no, 
       20, y + 360); 
  
  y = y + 20; 
}

输出：

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

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 p5.js MediaElement removeCue() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。