当前位置: 首页>>代码示例>>用法及示例精选>>正文


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

p5.j​​s中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。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。