Related Articles

Related Articles

p5.js MediaElement clearCues() Method
  • Last Updated : 29 Sep, 2020

The clearCues() method of p5.MediaElement of p5.js library is used to clear all the currently scheduled cues of the media element that have been scheduled using the addCue() method.

Syntax:

clearCues()

Parameters: This function accepts no parameters.

The following libraries are included in the “head” section of the HTML file for the JavaScript functions to work.

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



Example: The below example illustrates the clearCues() method of p5.js library.

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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(1.5);
  example_media.showControls();
  
  rmvBtn = 
    createButton("Remove All Cues");
  rmvBtn.position(20, 320);
  rmvBtn.mousePressed(removeCues)
  
  
  // Using the addCue() method for scheduling
  // the given callback functions
  example_media.addCue(3, changeColor);
  example_media.addCue(4, changeColor);
  example_media.addCue(5, changeColor);
  example_media.addCue(7, changeColor);
}
  
function removeCues() {
  clear();
  
  // Remove all cues associated with
  // the media element
  example_media.clearCues();
  
  text("All cues removed!", 20, 360);
  
  text("The clearCues() method removes " +
       "all the current cues", 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);
}

chevron_right


Output:

Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference:https://p5js.org/reference/#/p5.MediaElement/clearCues

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :