Javascript Media - 4 Methods and 24 Properties (Reference)

Tech:
Javascript
Since:
1 year ago
Views:
7

The javascript media object is used to access the media of the document. It returns a media object which has 4 methods and 24 properties.

Media Methods:

Media Properties:

canPlayType()

Reports how likely it is that the current browser will be able to play media of a given MIME type.

var x = document.createElement("video");
var y = x.canPlayType("video/mp4");

// "probably" or "maybe" or ""

load()

Resets to its initial state. Begins selecting the source. Loading for playback to begin at the beginning.

var x = document.getElementById("video");
x.load();

play()

Start the playback.

var x = document.getElementById("video");
x.play();

pause()

Pause the playback.

var x = document.getElementById("video");
x.pause();

audioTracks

Returns an AudioTrackList object.

var x = document.getElementById("video");

for (var i = 0; i < x.audioTracks.length; i += 1) {
  x.audioTracks[i].enabled = false;
}

videoTracks

Returns an VideoTrackList object.

var x = document.getElementById("video");

for (var i = 0; i < x.videoTracks.length; i += 1) {
  x.videoTracks[i].enabled = false;
}

textTracks

Returns an TextTrackList object.

var x = document.getElementById("video");

for (var i = 0; i < x.textTracks.length; i += 1) {
  x.textTracks[i].enabled = false;
}

autoplay

Reflects the autoplay HTML attribute.

var x = document.getElementById("video");

x.autoplay = false;

src

Reflects the src HTML attribute.

var x = document.createElement("video");
var y = x.src;

loop

Reflects the loop HTML attribute.

var x = document.createElement("video");
var y = (x.loop = true);

defaultMuted

Reflects the muted HTML attribute.

var x = document.createElement("video");
x.defaultMuted = true;

controls

Reflects the controls HTML attribute.

var x = document.createElement("video");
x.controls = true;

buffered

Returns ranges of the media source that the browser has buffered. It is a read-only property.

var x = document.createElement("video");
var y = x.buffered; // TimeRanges { length: 0 }

controlsList

Returns a DOMTokenList to select what controls to show on the media element. It is a read-only property.

var x = document.getElementById("video").controlsList;

currentSrc

Returns source of the media. It is a read-only property.

var x = document.createElement("video");
var y = x.currentSrc; // "src path"

currentTime

specifies the current playback time in seconds. Changing the value of currentTime seeks the media to the new time.

var x = document.createElement("x");
var y = x.currentTime;

disableRemotePlayback

Determines whether the media element is allowed to have a remote playback UI.

var x = document.createElement("audio");
x.disableRemotePlayback = true;

error

It is the MediaError object for the most recent error. It is a read-only property.

var x = document.createElement("video");
var y = x.error;

paused

It indicates whether the media element is paused.

var x = document.createElement("video");
var y = x.paused;

muted

It indicates whether the media element muted.

var x = document.createElement("video");
var y = x.muted;

ended

It indicates whether the media element has ended playback. It is a read-only property.

var x = document.createElement("video");
var y = x.ended;

defaultPlaybackRate

It indicates the default playback rate for the media.

var x = document.createElement("video");
var y = x.defaultPlaybackRate;

playbackRate

It indicates the rate at which the media is being played back. Set controls for fast forward, slow motion.

var x = document.createElement("video");
var y = x.playbackRate;

duration

It indicates the length of the element's media in seconds. It is a read-only property.

var x = document.createElement("video");
var y = x.duration;

networkState

It indicates the current state of the fetching of media over the network. It is a read-only property.

var x = document.getElementById("video");

x.addEventListener("playing", function() {
  if (x.networkState === 2) {
    // Still loading...
  }
});

// NETWORK_EMPTY    0
// There is no data yet. Also, readyState is HAVE_NOTHING.

// NETWORK_IDLE 1
// HTMLMediaElement is active and has selected a resource, but is not using the network.

// NETWORK_LOADING  2
// The browser is downloading HTMLMediaElement data.

// NETWORK_NO_SOURCE    3
// No HTMLMediaElement src found.

readyState

It indicates the readiness state of the media. It is a read-only property.

var x = document.getElementById("video");

x.addEventListener("loadeddata", function() {
  if (x.readyState >= 2) {
    x.play();
  }
});

// HAVE_NOTHING 0
// No information is available about the media resource.

// HAVE_METADATA    1
// Enough of the media resource has been retrieved that the metadata attributes are initialized. Seeking will no longer raise an exception.

// HAVE_CURRENT_DATA    2
// Data is available for the current playback position, but not enough to actually play more than one frame.

// HAVE_FUTURE_DATA 3
// Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).

// HAVE_ENOUGH_DATA 4
// Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.

seekable

It returns a TimeRanges object that contains the time ranges that the user is able to seek to. It is a read-only property.

var x = document.getElementById("video");
var y = x.seekable;

volume

It sets the volume at which the media will be played.

// 0 to 1
var x = document.getElementById("video");
x.volume = 1;
More Articles
Javascript Number - 10 Methods and 5 Properties (Reference)
2 years ago
1
Javascript Statements - 16 Statements (Reference)
2 years ago
6
Javascript matchMedia - 2 Methods and 2 Properties (Reference)
2 years ago
1
Javascript Object - 21 Methods (Reference)
1 year ago
3
Javascript Document - 24 Methods (Reference)
1 year ago
2