📜  p5.js MediaElement removeCue() 方法

📅  最后修改于: 2022-05-13 01:56:23.250000             🧑  作者: Mango

p5.js MediaElement removeCue() 方法

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

句法:

removeCue( id )

参数:此函数接受如上所述和如下所述的单个参数:

  • id:它是一个数字,指定 addCue 方法返回的 cue 的 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);
}


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


输出:

示例 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