Table of Contents
Welcome back in our tutorial about JavaScript events! Do you like media? I mean, do you like things like audio, video and images? I bet you do. We all like this stuff and JavaScript obviously too. There are a lot of events related just to media elements and today we are going to discuss them. Due to their big amount we might not have enough space to explore all of them. In that case, the rest will be discussed in another post (I know … Another part? It’s almost like Friday the 13th). Without further ado, let’s begin!
Oh, one more thing … I’m thinking about making some adjustments to posting frequency. Since today posts will be released three times per week – Monday, Wednesday and Friday. This might give you some time absorb the information and practice to level up your skills. Please, tell me via comment or message your opinion. Now, we can go back to the subject of this post – JavaScript media events.
onplay & onpause
The first two events we are going to play with are onplay and onpause events. The onplay event will be triggered every time you press play button on video or audio player on the website. On the other hand, when you pause the audio or video, onpause event will be triggered. One way to implement these events is to display tooltip showing information the video (or audio) was paused.
JavaScript:
var video = document.getElementById("js-video");
var tooltip = document.getElementById("js-tooltip");
// show tooltip on pause
video.onpause = function() {
tooltip.classList.add("js-hide");
};
video.onplay = function() {
tooltip.classList.remove("js-hide");
};
oncanplay
Event looking similar to onplay is oncanplay. The difference between these two is that oncanplay is triggered when media is buffered (loaded in cache) enough so it can be played. How to use it? You can inform the user by showing a message that media (audio or video) is ready to be played.
JavaScript:
var song = document.getElementById("js-audio");
song.oncanplay = function() {
// create new paragraph element
var message = document.createElement("p");
// create text content
var text = document.createTextNode("Song is ready to be played.");
// append the text to paragraph
message.appendChild(text);
// finally, append the message with text to body element
document.getElementsByTagName("body")[0].appendChild(message);
};
oncanplaythrough
Similar to previous event is oncanplaythrough. Unlike its predecessor, this event will be triggered when whole media file is ready to be played, from start to end, without any need to pause for buffering it (caching it). For example, you may disable button controling the media as default and enable it when the media content is fully buffered (loaded).
JavaScript:
var play = document.getElementById("js-play-btn");
// disable button as default
play.disabled = true;
// when buffered up, enable the button
video.oncanplaythrough = function() {
play.disabled = false;
};
onwaiting
When we touched the aspect of buffering, we should also mention onwaiting event. This event will be triggered when the audio or video has paused because it needs to be loaded. You may experienced this already. You are watching some video and it suddenly stops, without any interaction from your side. In most cases, some type of loader is displayed to indicate that video is loading. You can easily imitate this behavior too.
JavaScript:
// Warning: it is not best practice to manipulate CSS via JS
var video = document.getElementById("js-video");
var loader = document.getElementById("js-loader");
// change the CSS display property of loader to "none"
loader.style.display = "none";
video.onwaiting = function() {
// switch the CSS display property back to … let's say "block"
loader.style.display = "block";
};
// better way - add new class to loader
loader.classList.add("js-hide");
video.onwaiting = function() {
// remove the class from loader
loader.classList.remove("js-hide");
};
onended
How about to thank the visitor for watching your video or listening to your song? Well, onended event can help you do exactly that. When audio or video reached its end, this event will be immediately triggered. So, let’s show that thank you message along with buttons for sharing the link to video.
JavaScript:
var audio = document.getElementsByTagName("audio")[0];
audio.onended = function() {
prompt("Thank you for listening! Do you want to share this song with your friends?");
}
onloadstart
When you visit some website with video or audio element that is set to load automatically, at time the load starts, the onloadstart event will be triggered. Let’s change the text on the button to “Loading … ” when media is being loaded and then use oncanplay we already talked about to change the text again to “Play”.
JavaScript:
var video = document.getElementById("js-video");
var button = document.getElementById("js-btn");
video.onloadstart = function() {
// change the text of button to "Loading … "
button.innerHTML = "Loading … ";
// change the value attribute of button to "Loading … "
button.value = "Loading … ";
}
video.oncanplay = function() {
// change the text of button to "Play"
button.innerHTML = "Play";
// change the value attribute of button to "Play"
button.value = "Loading … ";
}
onplaying
Do you like that effect of darkening the background when playing some video? It’s just like in the cinema. No distraction. If you want to achieve the same, you can watch for onplaying event that will occur when the video (or audio) has started playing.
JavaScript:
var video = document.getElementById("js-video");
var overlay = document.getElementById("js-overlay");
video.onplaying = function() {
// add CSS class containing visibility property set to visible to overlay
overlay.classList.add("js-visible");
}
onemptied & onerror
No matter how advanced technology do we have, errors happen from time to time. For these situations we have onemptied and onerror events. onemptied event is triggered in cases such as your connection will break and file is no longer available (it also has not been fully buffered yet). On the other hand, onerror event is triggered when some error occurs during loading process of the file. For the first event, we can display a message informing the user that there are some issues with internet connection and video is not available now.
JavaScript:
var video = document.getElementById("js-video");
video.onemptied = function() {
// show a message
alert("The video cannot continue because your connection appears to be broken.");
}
Similarly, we can inform the user about errors occurred during loading of the file. We can also ask them if they want to try to reload the video.
JavaScript:
var video = document.getElementById("js-video");
video.onerror = function() {
// show message and ask the user about next steps
prompt("The video could not be loaded due to errors. Do you wish to reload it again?");
}
onerror event also offers you additional options (errors) you can watch for like MEDIA_ERR_ABORTED, MEDIA_ERR_NETWORK, MEDIA_ERR_DECODE and MEDIA_ERR_SRC_NOT_SUPPORTED.
Summary
We are in about a half of the media events list now. So, let’s end it here and left the remaining ones for the next post about JavaScript Events which will be Pt6 (How many sequels Friday the 13th has?).
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
