canplaythrough | oncanplaythrough event

Occurs when playback to end is possible without requiring a stop for further buffering.

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.9.12

Syntax

HTML Attribute	<element oncanplaythrough = "handler(event)">
Event Property	object.oncanplaythrough = handler;
addEventListener Method	object.addEventListener("canplaythrough", handler, useCapture)

Event information

Synchronous	No
Bubbles	No
Cancelable	No

Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.9.12

Remarks

The oncanplaythrough event is raised when data is being fetched at a rate that would allow playback without interruption at the defaultPlaybackRate. If the autoplay attribute is specified, the video starts playing when oncanplaythrough is received.

This event occurs after oncanplay and before the first onprogress event is received.

To invoke this event, do one of the following:

Load a media resource.

Examples

This example displays a number of media events.

HTML


// content has loaded, display buttons and set up events
video.addEventListener("canplay", function () {
  document.getElementById("buttonbar").style.display = "block";
}, false);

//  display video duration when available
video.addEventListener("loadedmetadata", function () {
  vLength = video.duration.toFixed(1);
  document.getElementById("vLen").textContent = vLength; // global variable
}, false);

//  display the current and remaining times
video.addEventListener("timeupdate", function () {
  //  Current time  
  var vTime = video.currentTime;
  document.getElementById("curTime").textContent = vTime.toFixed(1);
  document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
}, false);
//  paused and playing events to control buttons
video.addEventListener("pause", function () {
  document.getElementById("play").textContent = ">";
}, false);

video.addEventListener("playing", function () {
  document.getElementById("play").textContent = "||";
}, false);

video.addEventListener("volumechange", function () {
  if (video.muted) {
    // if muted, show mute image
    document.getElementById("mute").innerHTML = "<img alt='volume off button' src='mute2.png' />";
  } else {
    // if not muted, show not muted image
    document.getElementById("mute").innerHTML = "<img alt='volume on button' src='vol2.png' />";
  }
}, false);
//  Download and playback status events.
video.addEventListener("loadstart", function () {
  document.getElementById("ls").textContent = "Started";
}, false);
video.addEventListener("loadeddata", function () {
  document.getElementById("ld").textContent = "Data was loaded";
}, false);

video.addEventListener("ended", function () {
  document.getElementById("ndd").textContent = "Playback ended";
}, false);

video.addEventListener("emptied", function () {
  document.getElementById("mt").textContent = "Video reset";
}, false);

video.addEventListener("stalled", function () {
  document.getElementById("stall").textContent = "Download was stalled";
}, false);
video.addEventListener("waiting", function () {
  document.getElementById("waiting").textContent = "Player waited for content";
}, false);
video.addEventListener("progress", function () {
  pgFlag += "+";
  if (pgFlag.length > 10) {
    pgFlag = "+";
  }
  document.getElementById("pg").textContent = pgFlag;

}, false);
video.addEventListener("durationchange", function () {
  document.getElementById("dc").textContent = "Duration has changed";
}, false);
video.addEventListener("canplaythrough", function () {
  document.getElementById("cpt").textContent = "Ready to play whole video";
}, false);