p5.MediaElement showControls() Method

The showControls() method of p5.MediaElement in p5.js is used to show the default media controls for the media element. The control features and design of the controls are determined by the web browser.

Syntax:

showControls()

Parameters: This method does not accept any parameters.

The example below illustrate the showControls() method in p5.js:

Example:

Javascript

function setup() {
    createCanvas(500, 400);
    textSize(20);

    example_media =
      createVideo("sample-video.mp4");
    example_media.size(500, 300);
    example_media.position(20, 100);

    example_media.play();

    text("Click on the button to " +
         "show media controls", 20, 20);

    showBtn = createButton("Show Controls");
    showBtn.position(30, 40);
    showBtn.mousePressed(show);
}

function show() {

  // Show the media controls
  example_media.showControls();

  text("Media controls are now visible!",
       20, 80);
}

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/showControls