A class to handle audio and video.
p5.MediaElement
extends p5.Element with methods to handle audio and video. p5.MediaElement
objects are created by calling createVideo, createAudio, and createCapture.
Examples
Syntax
p5.MediaElement(elt)
Parameters
DOM node that is wrapped
Fields
Path to the media element's source as a string.
Methods
Plays audio or video from a media element.
Stops a media element and sets its current time to 0.
Calling media.play()
will restart playing audio/video from the beginning.
Pauses a media element.
Calling media.play()
will resume playing audio/video from the moment it paused.
Plays the audio/video repeatedly in a loop.
Stops the audio/video from playing in a loop.
The media will stop when it finishes playing.
Sets the audio/video to play once it's loaded.
The parameter, shouldAutoplay
, is optional. Calling media.autoplay()
without an argument causes the media to play automatically. If true
is passed, as in media.autoplay(true)
, the media will automatically play. If false
is passed, as in media.autoPlay(false)
, it won't play automatically.
Sets the audio/video volume.
Calling media.volume()
without an argument returns the current volume as a number in the range 0 (off) to 1 (maximum).
The parameter, val
, is optional. It's a number that sets the volume from 0 (off) to 1 (maximum). For example, calling media.volume(0.5)
sets the volume to half of its maximum.
Sets the audio/video playback speed.
The parameter, val
, is optional. It's a number that sets the playback speed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2 plays it at double speed, and so on. -1 plays the media at normal speed in reverse.
Calling media.speed()
returns the current speed as a number.
Note: Not all browsers support backward playback. Even if they do, playback might not be smooth.
Sets the media element's playback time.
The parameter, time
, is optional. It's a number that specifies the time, in seconds, to jump to when playback begins.
Calling media.time()
without an argument returns the number of seconds the audio/video has played.
Note: Time resets to 0 when looping media restarts.
Returns the audio/video's duration in seconds.
Calls a function when the audio/video reaches the end of its playback.
The element is passed as an argument to the callback function.
Note: The function won't be called if the media is looping.
Sends the element's audio to an output.
The parameter, audioNode
, can be an AudioNode
or an object from the p5.sound
library.
If no element is provided, as in myElement.connect()
, the element connects to the main output. All connections are removed by the .disconnect()
method.
Note: This method is meant to be used with the p5.sound.js addon library.
Disconnect all Web Audio routing, including to the main output.
This is useful if you want to re-route the output through audio effects, for example.
Show the default HTMLMediaElement controls.
Note: The controls vary between web browsers.
Hide the default HTMLMediaElement controls.
Schedules a function to call when the audio/video reaches a specific time during its playback.
The first parameter, time
, is the time, in seconds, when the function should run. This value is passed to callback
as its first argument.
The second parameter, callback
, is the function to call at the specified cue time.
The third parameter, value
, is optional and can be any type of value. value
is passed to callback
.
Calling media.addCue()
returns an ID as a string. This is useful for removing the cue later.
Removes a callback based on its ID.
Removes all functions scheduled with media.addCue()
.