p5.js createVideo() Function

The createVideo() function is used to create a video element in the DOM. The video is created as a p5.MediaElement, which has methods for controlling the media and its playback.

Syntax:

createVideo(src, callback)

Parameters: This function accepts two parameters as mentioned above and described below:

• src: It is a string that specified path of the video file. An array of strings can also be used to specify multiple paths for the support of different browsers.
• callback: It is a callback function that would be fired when the ‘canplaythrough’ event fires. This event is fired when the video has completed loading and does not require any additional buffering. It is an optional parameter.

Return Value: It returns a pointer to the p5.MediaElement with the video.

Below examples illustrate the createVideo() function in p5.js:

Example 1:

function setup() {
  createCanvas(300, 300);
  text("Click on the buttons below to"+
       " play/pause the video", 20, 20);

  vidElement = createVideo("sample_video.mp4");
  vidElement.position(20, 0);
  vidElement.size(300);

  playBtn = createButton("Play Video");
  playBtn.position(30, 40);
  playBtn.mouseClicked(playVideo);

  pauseBtn = createButton("Pause Video");
  pauseBtn.position(150, 40);
  pauseBtn.mouseClicked(pauseVideo);
}

function playVideo() {
  vidElement.play();
}

function pauseVideo() {
  vidElement.pause();
}

Output:

Example 2:

function setup() {
  createCanvas(300, 300);
  text("Loading the video...", 20, 20);

  vidElement = createVideo("sample_video.mp4", afterLoad);
  vidElement.position(20, 20);
  vidElement.size(300);
}

function afterLoad() {
  text("The video has finished loading and will"+
                           " now play!", 20, 40);
  vidElement.play();
}

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