Table of Contents
Today we are going to finish media JavaScript events, explore events related to clipboard and finally finish this series about events. If you have missed the previous one, make sure to check them too. Except this and previous part, the rest are not linked to each other and so you can read them as you wish. However, this part is a sequel to part 5 when we started to talk about media events, so it might be better to read that part first. Without further ado, let’s begin!
The majority of events we are going to discuss today will have just a brief overview to understand how they work without making the post unnecessary log.
oncuechange
The first event we will start with works with track element you can use (nest) inside the video and audio elements. Whenever there is some change in the cue in track element, activeCues is displayed. This property (activeCues) returns TextTrackCues object.
ondurationchange
This event, ondurationchange, is triggered in situations when the length of audio or video content you are using on the website is changes. Remember that when video or audio loads, duration has NaN value before it is updated to the actual duration of media.
It is useful to note here that the process of loading the media consist of several events. These events are onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay and finally oncanplaythrough. All of these events are not supported by older version of IE than 9.
onloadedmetadata
Every audio and video (and also images) contain some metadata. When you want to play some video or audio, the browser has to load the files and these metadata as well. Actually, metadata are very important for the correct function of media because they include properties such as text tracks, duration and, in case of video, also dimensions (resolution of the video).
onloadeddata
Every video and audio content is composed of individual frames. These frames are loaded one after another until whole file is loaded. The onloadeddataevent comes when data for current frame are loaded.
onprogress
When browser is downloading the content on the website, onprogress event is trigerred. If you want, you can use responseText string to retrieve the data.
onratechange
During playing the video or audio, when you modify the playback by slowing it down or speeding it up, onratechangeevent is triggered.
onseeked & onseeking
These two events are dependent on user interaction with media. When user seeks through the audio or video, onseeking event is triggered – during the interaction. When this interaction ends, onseeked event is fired. How about to use this event to surprise the user with modal window?
JavaScript:
var modWindow = document.getElementById(“js-modal”);
var media = document.getElementById(“js-media”);
media.onseeking = function() {
// adding new class to modal window that changes either “display” or “visibility” property
modWindow.classList.toggle(“js-show”);
}
onstalled
In order to play some video or audio content, the browser has to fetch (get) it first. When the data for content are unexpectedly not available (forthcoming), onstalledevent is triggered.
JavaScript:
var audio = document.getElementById(“js-audio”);
audio.onstalled = function() {
// creating new paragraph and appending it to container on the page
var message = document.createElement(“p”);
var text = document.createTextNode(“We are sorry, but the audio could not be loaded.”);
message.appendChild(text);
document.getElementById(“js-container”).appendChild(message);
}
onsuspend
This event, onsuspend, will occur when data can be fetched and they are, but for some reason the loading process is stopped. However, this does not have to mean an error. For example, when the browser finish downloading or user pause it, onsuspend event will be fired as well.
ontimeupdate
You are watching some pretty good movie and suddenly some boring part appears. What’s the best to do in that situation? Well, you can skip it. When you change the play position of video or audio either manually or by using fast forward or backward, this event will occur.
onvolumechange
The last media-related JavaScript event we will cover today is onvolumechange. It will be triggered every time you increase or decrease the volume of media or mute / unmute it. Interesting and somewhat funny thing can be displaying subtitles or transcript when user mute the sound.
JavaScript:
var video = document.getElementById(“js-video”);
// hidding subtitles as default
video.textTracks[0].mode = “hidden”;
var muteButton = document.getElementById(“js-mute-btn”);
muteButton.onvolumechange = function() {
// showing subtitles
video.textTracks[0].mode = “showing”;
}
Before we close it, let’s mention last three events you can encounter in your work when playing with HTML and JS. These events are related to clipboard.
oncopy
First event is oncopy. When you try to copy some text, image or whatever and you choose “Copy” or press [CTRL] + [C], this event will be fired. You can easily use this event to protect the content of your website from being copied in just a few lines of JavaScript.
JavaScript:
var text = document.getElementById("js-text");
text.oncopy = function(e) {
// show a message
alert(“Please don't copy our stuff.”);
// prevent copying content to clipboard
e.preventDefault();
}
oncut
Second event is oncut. When you “cut” piece of some content, or the whole thing, oncut event will occur. This event is kind of interesting because you can use it on text elements on your page even though they are not editable (except you add contenteditable attribute to them and set it to true). More meaningful way of using this event can be in text areas or input fields.
onpaste
The last event in this series is onpaste. This event will be triggered every time you or some user will paste some content. It will occur right after pasting it. For example, if you want, for whatever reason, disable pasting ability in some input field, you can use modified version of code from oncopy example.
JavaScript:
var input = document.getElementById(“js-input”);
input.onpaste = function(e) {
alert(“Pasting is not allowed here.”);
e.preventDefault();
}
Or you can thank to the user for pasting in his personal information into the form …
JavaScript:
// storing an array of inputs inside variable
var inputs = document.getElementsByTagName(“input”);
// cycling through inputs
for (var i = 0, j = inputs.length; i < j; i++) {
inputs[i].onpaste = function() {
alert(“Thank you very much for your trust.”);
};
}
Summary
That’s all guys. I hope this series will help you progress in your skills and make it easier to create interesting projects in the future. Thank you very much for your time and attention.
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
