Thecanplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("canplay", (event) => { })oncanplay = (event) => { }

Event type

A genericEvent.

Examples

These examples add an event listener for the HTMLMediaElement'scanplay event, then post a message when that event handler has reacted to the event firing.

UsingaddEventListener():

const video = document.querySelector("video");video.addEventListener("canplay", (event) => {  console.log("Video can start, but not sure it will play through.");});

Using theoncanplay event handler property:

const video = document.querySelector("video");video.oncanplay = (event) => {  console.log("Video can start, but not sure it will play through.");};

Specifications

Browser compatibility

Related Events

• The HTMLMediaElementplaying event
• The HTMLMediaElementwaiting event
• The HTMLMediaElementseeking event
• The HTMLMediaElementseeked event
• The HTMLMediaElementended event
• The HTMLMediaElementloadedmetadata event
• The HTMLMediaElementloadeddata event
• The HTMLMediaElementcanplaythrough event
• The HTMLMediaElementdurationchange event
• The HTMLMediaElementtimeupdate event
• The HTMLMediaElementplay event
• The HTMLMediaElementpause event
• The HTMLMediaElementratechange event
• The HTMLMediaElementvolumechange event
• The HTMLMediaElementsuspend event
• The HTMLMediaElementemptied event
• The HTMLMediaElementstalled event

See also

• HTMLAudioElement
• HTMLVideoElement
• <audio>
• <video>