We already learned how to use the
.play() method to play a video. In actuality, there is another way to get a video to play: the
.loop() method. Whereas the
.play() method only plays a video once, the
.loop() method will play a video and loop it infinitely.
.loop() way too many times, such as in every iteration of the
draw() loop, can cause errors. In general, it’s best to call them in
setup(), or call them in response to user input, like mouse clicks.
To stop a playing or looping video, use the
.stop() method stops the video and returns it to the starting frame of the video. To pause the video at the current frame—so that you can later resume it where you left off—use the
To change the volume of the video’s sound, use the
.volume() method. It takes in a decimal number ranging from 0 to 1, with 0 being no volume and 1 being maximum volume.
video.volume(0); // Mutes the sound video.volume(1); // Plays sound at max volume video.volume(0.5); //Plays sound at half volume
In this example, we’ll use these video methods to help build a Vlog site for Codey: Codecademy’s unofficial mascot!
Parts of the site are created already. Using p5.js, there is already a video loaded and drawn to the canvas with the
image() function, but remember that the video frame will not show up unless the video starts playing.
Using HTML and CSS, Codey has also created a title, a page background, and buttons for video controls. The buttons, when pressed, trigger prewritten functions—your job is to help Codey fill them in with p5.js video control code!
First, in the
pressPlayButton() function, add code that plays the video when the play button is pressed.
pressPauseButton() function, add code that pauses the video when the pause button is pressed.
pressToggleVolumeButton() function, fill in code to turn the volume on and off when the Toggle Volume button is pressed. When the volume is on, it should be at maximum value.