Categories
JavaScript JavaScript Basics

What Does the Percent Sign Mean in JavaScript?

JavaScript has many operators. One of them is the percent sign: %. It has a special meaning in JavaScript: it’s the remainder operator. It obtains the remainder between two numbers.

This is different from languages like Java, where % is the modulo operator.

In this piece, we’ll look at the difference between the modulo and the remainder operator.


Modulo Operator

The modulo operator works like the mod operator in math. It’s a basic part of modular arithmetic, which works like the clock. The number wraps around to something smaller than the given value, when it’s bigger than it.

For example, a clock has 12 hours. We represent that in math with by writing x mod 12 where x is an integer. For example if x is 20 then 20 mod 12 is 8 since we subtract 12 until it’s between 0 and 11.

Another example would be a negative number for x. If x is -1, then -1 mod 12 is 11 since we add 12 to it to make it within between 0 and 11.

12 mod 12 is 0 since we subtract 12 from it until it’s within the same range.

The operand after the mod can be positive or negative.

If the right-hand operand is negative, then the range of it must be from the negative number plus 1 to 0.

For example, if we have 1 mod -3 . Then we subtract 3 from it to get -2 .

To see more properties of modular arithmetic, check out this article for modular arithmetic and this article for the modulo operator from Wikipedia.

The JavaScript percent sign doesn’t do modular arithmetic. It’s used for finding the remainder when the first operand is divided by the second operand.


Remainder Operator

This is what JavaScript’s percent sign actually means. For example, if we write:

10 % 2

we get 0 since 10 is evenly divisible by 2.

If the first operand isn’t even divisible by the second operand, then we get a non-zero remainder. For example, if we have:

10 % 3

Then we get 1 since 10 divided by 3 has a remainder of 1.

Since the percent sign is a remainder operator, it also works if either number is negative. For example, if we have:

10 % -3

Then we get 1 because the quotient is -3 and the remainder is 1.

On the other hand, if we write:

-10 % 3

Then we get -1 because the quotient is -3 and the remainder is -1.


Bitwise Operator for Doing Modular Arithmetic

We can use the >>> operator, which is the zero left shift operator, to compute a number modulo 2 to the 32nd power.

The zero left shift operator shifts right by pushing zero in from the left and the rightmost one falls off the shift.

For example, if we write:

2**32 >>> 32

Then we get 0 since we pushed 32 zeroes in from the left, which pushed all the ones out.

Writing 2**32 >>> 0 is the same as 2**32 >>> 32.

If we write 2**32 + 1 >>> 32 then we get 1 since we added the 33rd bit on the left with the value 1, then we pushed in 32 zeroes from the left, leaving only 1 bit left.


Using Typed Array for Modulo Operation

We can also use typed arrays like the Uint8Array, Uint16Array, and Uint32Array for modulo operations since each entry can only be 0 to 2**8–1, 0 to 2**16–1, or 0 to 2**32–1respectively. The U in the first character of the name means unsigned.

In each example below, we create a typed array with one entry, then we assign various values to it to compute x mod 2**8 , x mod 2**16 and x mod 2**32 respectively.

For example, if we write:

const arr1 = new Uint8Array(1);  
arr1[0] = 2**8;  
console.log(arr1[0]);  
arr1[0] = 2**8 + 1;  
console.log(arr1[0]);

Then we get that the first console.log gives us 0 and the second console.log gives us 1 since the entries are wrapped to be between 0 and 2**8 - 1.

Likewise, we can do the same thing with the other kinds of typed arrays as follows:

const arr1 = new Uint16Array(1);  
arr1[0] = 2**16;  
console.log(arr1[0]);  
arr1[0] = 2**16 + 1;  
console.log(arr1[0]);

And:

const arr1 = new Uint32Array(1);  
arr1[0] = 2**32;  
console.log(arr1[0]);  
arr1[0] = 2**32 + 1;  
console.log(arr1[0]);

Then we get the same results as the first example.


Write a Modulo Function with JavaScript

If we actually want to do modular arithmetic with JavaScript, we have to write our own modulo function.

One example would be this:

const mod = (a, b) => ((a % b) + b) % b

It wraps the results of a % b to be within 0 and b — 1 or b+1 and 0 if b is negative by adding a % b to b. a % b is always less than a since it’s the remainder, but it might not be within the range of 0 and b — 1 or b+1 and 0and 0 if b is negative so we add b to it.

If we write:

console.log(mod(1, 12));  
console.log(mod(13, 12));  
console.log(mod(13, -12));

Then we should get:

1  
1  
-11

This is what we expect.

In JavaScript, the percent sign is the remainder operator. It gets us the remainder of the number when we divide the left operand by the right operand. To do real modulo operations with JavaScript, we have to write our own function to do it or we can use a typed array to do it since it wraps the value to be within the given range.

Categories
JavaScript

What can we build with JavaScript?

From its simple beginnings as a language to do browser-side scripting, JavaScript has evolved a lot since the first version of the language. There’re now lots of things that we can build with JavaScript that we can’t do before. Here’re some things that we can build with JavaScript today.

Client-Side Apps

JavaScript is still the only language for browser-side web applications. The proliferation of app frameworks like React, Angular, and Vue have made things infinitely easier. Also with ES6+, building client-side apps with JavaScript has been much more pleasant than before. Any other language like TypeScript has to be converted to plain JavaScript before they can run in browsers. All modern browsers support JavaScript and nothing else, so it’s the only language for client-side applications.

Server-Side Web Apps

With Node.js, JavaScript has arrived on the server-side. We can do so much with Node.js, like building a back-end app. There’re various back end frameworks like Express, Nest.js, and many other frameworks that let us write back end apps with ease. It’s so popular that popular hosts like Amazon Web Services have provided SDKs for Node.js, so we can integrate with their services without a hitch. It’s also pretty fast and easy to build back end apps with it.

There’re libraries for interacting with most popular database systems like MySQL and Postgres so we can easily use it for back end apps. If we want NoSQL, there’s also tight MongoDB integration with libraries like Mongoose which lets us interact with MongoDB and provides a schema to save dynamic data.

Presentations

With Reveal.js and Eagle.js, we can use it easily to build presentations with HTML, CSS, and JavaScript. It provides as much flexibility as PowerPoint but they cost nothing. This is great since it hasn’t been to easy to build presentations with code before these libraries existed.

Scripts

Once again, Node.js provides a great run-time environment for running scripts. With the fs module, we can do lots of common file and folder operations like add, changing, renaming, and deleting files. Also, changing permissions is easy with it. It also has the child_process module to run processes on any computer the script is running.

Also, Node.js is aware of the differences between Windows and Unix-like systems like Linux and Mac OS, so compatibility issues are minimal when running scripts on any computer.

Games

With HTML5, add interactivity to web pages is easier than ever. This is coupled with the power of JavaScript to make everything dynamic. The Canvas API has lots of methods to draw whatever we want and make them animate.

There’re also game frameworks like Phaser which abstracts out some of the more tedious parts like handling inputs and animations of shapes by abstracting things out into a framework.

Mobile Apps

There’re 2 ways to build mobile apps with JavaScript. One is to write a native app with frameworks like React Native, and the other is to write a hybrid with frameworks like Ionic.

React Native lets us write our app’s code in JavaScript and then compile it into a native mobile app by converting the JavaScript React components into native components of the platforms you’re targeting. Since the framework builds code into native apps, accessing hardware is easier to React Native. It provides built-in support for cameras and accelerometers for example.

Hybrid app frameworks like Ionic let us write apps with HTML, CSS, and JavaScript and then display the code in a browser web view on our mobile devices. Accessing hardware requires native plugins which makes development and testing more difficult. Native plugins are also limited or buggy which is another problem if we try to build apps that need to access hardware with it.

They’re both cross-platform frameworks that let us write our code once and then build them for different platforms.

Internet of Things Programs

We can use JavaScript to build programs that control embedded hardware with frameworks like the Johnny-Five framework. It supports the Arduino single-board computer which we normal load C programs with it.

With Johnny-Five, we can use JavaScript to write our programs which makes writing useful programs a lot easier. It supports full hardware access like LEDs, timers, GPS, motors, buttons and switches, compasses, and more. Of course, this is also thanks to the existence of Node.js since it lets us run JavaScript programs outside the browser.

Desktop Apps

With Electron, we can write desktop apps with JavaScript easily. We can convert React, Angular or Vue apps into Windows, Linux, or Mac OS apps with Electron libraries for these frameworks.

We can also write apps with just the Electron framework alone. It can access things like our computer’s file system so it can do things that a normal desktop program does. However, access to specialized hardware is lacking so it’s more for general business apps. Lots of programs are built with Electron, with the biggest examples being Slack, Visual Studio Code, and the Atom text editor.

We can do a lot with JavaScript. Thanks to Node.js, JavaScript can leave the browser, letting us build apps for Internet of Things devices, back end apps, desktop apps and more. On the browser side, we can use it to build interactive apps like games and rich business apps. We can also make great presentations with it.

Categories
JavaScript JavaScript Basics

What are Holes in Arrays?

One special feature of JavaScript arrays is that not every slot in the array has to be filled with values. This means that we can skip values as follows:

let arr = [];  
arr[1] = 1;  
arr[10] = 10;

We don’t have to worry about setting values for other slots of the array.

There’s also an alternative syntax for doing the above, by writing:

[, 1, , 2];

What we have above are called holes of an array, where we have nothing between the commas. An array with holes is called a sparse array.

In this piece, we’ll look at how holes in arrays are handled in JavaScript.


Checking for Values in Arrays

We can check for holes in arrays with the in operator. To do this, we can write something like the following code:

const arr = [, 1, , 2];  
1 in arr;

We should get true returned from the last line since 1 is in the array.

ES6 treat holes in arrays as undefined entries. So if we want to check for holes in the array, check for undefined.

Iterators and generators also treat holes as undefined. For example, if we have

const arr = [, 1, , 2];  
const iter = arr[Symbol.iterator]()

for (let a of iter) {  
  console.log(a);  
}

we get

undefined  
1  
undefined  
2

If we call next to get the next item, as follows,

iter.next();

we get

{value: undefined, done: false}

for the first entry.

Likewise, if we have the given generator,

function* generator () {  
  const arr = [, 1, , 2];  
  for (let a of arr) {  
    yield a;  
  }  
}

for (let a of generator()) {  
  console.log(a);  
}

we get the same thing.


Array.from()

Array.from() treats holes as undefined like with iterators and generators.

For example, if we have

const arr = [, 1, , 2];  
const arrFrom = Array.from(arr);

then we get that the value of arrFrom is

[undefined, 1, undefined, 2]

Likewise, if we create an array from array-like objects, where we have non-negative integers as keys and a length property with a non-negative number as a value, missing entries are also treated as undefined.

For example, if we run

const arrFrom = Array.from({  
  1: 'foo',  
  length: 2  
});

we get the value of arrFrom as

[undefined, "foo"]

How Array.prototype Methods Treat Holes

The behavior of these methods differs with different versions of JavaScript. In ES5, they’re the following:

  • forEach, filter, every, and some ignore holes.
  • map skips but preserves holes.
  • join and toString treat holes as if they were undefined elements but treat both null and undefined as empty strings.

The following is a full list of methods and how they deal with holes. Each method acts differently.

  • concat — keeps holes
  • copyWithin — holes are copied
  • entries, keys, values — treats holes as undefined
  • every — ignores holes
  • fill — fills holes
  • filter — removes holes
  • find — treats holes as elements
  • findIndex — treats holes as elements
  • forEach — ignores holes
  • indexOf — ignores holes
  • join — converts holes to empty strings
  • lastIndexOf — ignores holes
  • map — preserves holes
  • pop — treat holes as elements
  • push — preserves holes
  • reduce , reduceRight— ignores holes
  • reverse — preserves holes
  • shift — treat holes as undefined
  • slice — preserves holes
  • sort — preserves holes
  • toString — preserves holes
  • unshift — preserves holes
  • values — converts holes to undefined

When arrays are sparse, they have holes. They’re iterated through as undefined, but each array prototype method treats holes differently, so we have to be careful when defining arrays with holes and dealing with them.

We can use the in operator to check if a given entry is in an array.

Array.from() also treats holes as undefined and turns holes into undefined when converting arrays or array-like objects with holes into arrays.

Categories
JavaScript TypeScript

TypeScript Advanced Types — Type Guards

TypeScript has many advanced type capabilities which make writing dynamically typed code easy. It also facilitates the adoption of existing JavaScript code since it lets us keep the dynamic capabilities of JavaScript while using the type-checking capabilities of TypeScript.

There are multiple kinds of advanced types in TypeScript, like intersection types, union types, type guards, nullable types, and type aliases, and more. In this article, we’ll look at type guards.


Type Guards

To check if an object is of a certain type, we can make our own type guards to check for members that we expect to be present and the data type of the values. To do this, we can use some TypeScript-specific operators and also JavaScript operators.

One way to check for types is to explicitly cast an object with a type with the as operator. This is needed for accessing a property that’s not specified in all the types that form a union type.

For example, if we have the following code:


interface Person {
  name: string;
  age: number;
}
interface Employee {
  employeeCode: string;
}
let person: Person | Employee = {
  name: 'Jane',
  age: 20,
  employeeCode: '123'
};
console.log(person.name);

Then the TypeScript compiler won’t let us access the name property of the person object since it’s only available in the Person type but not in the Employee type. Therefore, we’ll get the following error:

Property 'name' does not exist on type 'Person | Employee'.Property 'name' does not exist on type 'Employee'.(2339)

In this case, we have to use the type assertion operator available in TypeScript to cast the type to the Person object so that we can access the name property, which we know exists in the person object.

To do this, we use the as operator, as we do in the following code:

interface Person {
  name: string;
  age: number;
}
interface Employee {
  employeeCode: string;
}
let person: Person | Employee = {
  name: 'Jane',
  age: 20,
  employeeCode: '123'
};
console.log((person as Person).name);

With the as operator, we explicitly tell the TypeScript compiler that the person is of the Person class, so that we can access the name property which is in the Person interface.


Type Predicates

To check for the structure of the object, we can use a type predicate. A type predicate is a piece code where we check if the given property name has a value associated with it.

For example, we can write a new function isPerson to check if an object has the properties in the Person type:

interface Person {
  name: string;
  age: number;
}
interface Employee {
  employeeCode: string;
}
let person: Person | Employee = {
  name: 'Jane',
  age: 20,
  employeeCode: '123'
};
const isPerson = (person: Person | Employee): person is Person => {
  return (person as Person).name !== undefined;  
}
if (isPerson(person)) {
  console.log(person.name);  
}
else {
  console.log(person.employeeCode);  
}

In the code above, the isPerson returns a person is Person type, which is our type predicate.

If we use that function as we do in the code above, then the TypeScript compiler will automatically narrow down the type if a union type is composed of two types.

In the if (isPerson(person)){ ... } block, we can access any member of the Person interface.

However, this doesn’t work if there are more than two types that form the union type. For example, if we have the following code:

interface Animal {
  kind: string;
}
interface Person {
  name: string;
  age: number;
}
interface Employee {
  employeeCode: string;
}
let person: Person | Employee | Animal = {
  name: 'Jane',
  age: 20,
  employeeCode: '123'
};
const isPerson = (person: Person | Employee | Animal): person is Person => {
  return (person as Person).name !== undefined;  
}
if (isPerson(person)) {
  console.log(person.name);  
}
else {
  console.log(person.employeeCode);  
}

Then the TypeScript compiler will refuse to compile the code and we’ll get the following error messages:

Property 'employeeCode' does not exist on type 'Animal | Employee'.Property 'employeeCode' does not exist on type 'Animal'.(2339)

This is because it doesn’t know the type of what’s inside the else clause since it can be either Animal or Employee. To solve this, we can add another if block to check for the Employee type as we do in the following code:

interface Animal {
  kind: string;
}
interface Person {
  name: string;
  age: number;
}
interface Employee {
  employeeCode: string;
}
let person: Person | Employee | Animal = {
  name: 'Jane',
  age: 20,
  employeeCode: '123'
};
const isPerson = (person: Person | Employee | Animal): person is Person => {
  return (person as Person).name !== undefined;  
}
const isEmployee = (person: Person | Employee | Animal): person is Employee => {
  return (person as Employee).employeeCode !== undefined;  
}
if (isPerson(person)) {
  console.log(person.name);  
}
else if (isEmployee(person)) {
  console.log(person.employeeCode);  
}
else {
  console.log(person.kind);  
}

In Operator

Another way to check the structure to determine the data type is to use the in operator. It’s like the JavaScript in operator, where we can use it to check if a property exists in an object.

For example, to check if an object is a Person object, we can write the following code:

interface Animal {
  kind: string;
}
interface Person {
  name: string;
  age: number;
}
interface Employee {
  employeeCode: string;
}
let person: Person | Employee | Animal = {
  name: 'Jane',
  age: 20,
  employeeCode: '123'
};
const getIdentifier = (person: Person | Employee | Animal) => {
  if ('name' in person) {
    return person.name;
  }
  else if ('employeeCode' in person) {
    return person.employeeCode
  }
  return person.kind;
  
}

In the getIdentifier function, we used the in operator as we do in ordinary JavaScript code. If we check the name of a member that’s unique to a type, then the TypeScript compiler will infer the type of the person object in the if block as we have above.

Since name is a property that’s only in the Person interface, then the TypeScript compiler is smart enough to know that whatever inside is a Person object.

Likewise, since employeeCode is only a member of the Employee interface, then it knows that the person object inside is of type Employee.

If both types are eliminated, then the TypeScript compiler knows that it’s Animal since the other two types are eliminated by the if statements.


Typeof Type Guard

For determining the type of objects that have union types composed of primitive types, we can use the typeof operator.

For example, if we have a variable that has the union type number | string | boolean, then we can write the following code to determine whether it’s a number, a string, or a boolean. For example, if we write:

const isNumber = (x: any): x is number =>{
    return typeof x === "number";
}
const isString = (x: any): x is string => {
    return typeof x === "string";
}
const doSomething = (x: number | string | boolean) => {
  if (isNumber(x)) {
    console.log(x.toFixed(0));
  }
  else if (isString(x)) {
    console.log(x.length);
  }
  else {
    console.log(x);
  }
}
doSomething(1);

Then we can call number methods as we have inside the first if block since we used the isNumber function to help the TypeScript compiler determine if x is a number.

Likewise, this also goes for the string check with the isString function in the second if block.

If a variable is neither a number nor a string then it’s determined to be a boolean since we have a union of the number, string, and boolean types.

The typeof type guard can be written in the following ways:

  • typeof v === "typename"
  • typeof v !== "typename"

Where “typename” can be be "number", "string", "boolean", or "symbol".


Instanceof Type Guard

The instanceof type guard can be used to determine the type of instance type.

It’s useful for determining which child type an object belongs to, given the child type that the parent type derives from. For example, we can use the instanceof type guard like in the following code:

interface Animal {
  kind: string;
}
class Dog implements Animal{
  breed: string;
  kind: string;
  constructor(kind: string, breed: string) {    
    this.kind = kind;
    this.breed = breed;
  }
}
class Cat implements Animal{
  age: number;
  kind: string;
  constructor(kind: string, age: number) {    
    this.kind = kind;
    this.age = age;
  }
}
const getRandomAnimal = () =>{
  return Math.random() < 0.5 ?
    new Cat('cat', 2) :
    new Dog('dog', 'Laborador');
}
let animal = getRandomAnimal();
if (animal instanceof Cat) {
  console.log(animal.age);
}
if (animal instanceof Dog) {
  console.log(animal.breed);    
}

In the code above, we have a getRandomAnimal function that returns either a Cat or a Dog object, so the return type of it is Cat | Dog. Cat and Dog both implement the Animal interface.

The instanceof type guard determines the type of the object by its constructor, since the Cat and Dog constructors have different signatures, it can determine the type by comparing the constructor signatures.

If both classes have the same signature, the instanceof type guard will also help determine the right type. Inside the if (animal instanceof Cat) { ... } block, we can access the age member of the Cat instance.

Likewise, inside the if (animal instanceof Dog) {...} block, we can access the members that are exclusive to the Dog instance.


Conclusion

With various type guards and type predicates, the TypeScript compiler can narrow down the type with conditional statements.

Type predicate is denoted by the is keyword, like pet is Cat where pet is a variable and Cat is the type. We can also use the typeof type guard for checking primitive types, and the instanceof type guard for checking instance types.

Also, we have the in operator checking if a property exists in an object, which in turn determines the type of the object by the existence of the property.

Categories
JavaScript JavaScript Basics

Using HTML Audio and Video Elements

With HTML5, we are provided numerous tools and tags to work with multimedia. One of the new things that come with HTML5 is the ability to embed audio and video without needing plugins like Flash.

In this article, we’ll look at how to add audio and video elements to a web page and control it with JavaScript.

Adding Audio or Video Elements

To add audio and video elements, we use the audio and video tags respectively. They have a few attributes. They are:

  • autoplay — specifies whether the audio or video will play automatically
  • controls — specifies whether playback controls are shown
  • loop — specifies whether we want to play the clip again once it ends
  • muted — specifies if sound should play or not
  • preload — specifies which part of the clip should be preloaded. It can be auto , which loads everything, metadata, which loads only the metadata, or none, which loads nothing
  • src — the URL for the clip

To embed audio in our web pages, we can write the following:

<audio controls>  
  <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_OOG_1MG.ogg" type="audio/ogg">  
  <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg">  
  Your browser does not support the audio tag.  
</audio>

In the code above, we specified the audio in different formats of the audio that we want to load.

Likewise, we can do the same with video:

<video controls width="250">  
  <source src="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4" type="video/mp4">  
  Your browser does not support the video tag.  
</video>

In both pieces of code, then text within the tag is the fallback text in case the browser doesn’t support these tags.

Controlling the Elements with JavaScript

We can customize the functionality of the audio or video element with JavaScript code. The following are methods are available for controlling the playback of audio or video elements:

  • play — start playing the audio or video
  • pause — pausing the audio or video
  • load — reload the audio or video element
  • addTextTrack — add a text track to audio or video
  • canPlayType — check if the browser can play the specified type of audio or video

There’re also some properties that we can set the control the audio or video playback:

  • currentTime — sets the current time of the audio or video in seconds
  • defaultMuted — indicate whether the audio output should be muted by default
  • defaultPlaybackRate — a number indicating the default playback for the media
  • loop — boolean indicating whether we want restart playback after it ends
  • muted — boolean we can set for muting the audio
  • playbackRate — sets the playback rate of the clip
  • volume — change the volume of the audio or video

We can use these methods and value properties as follows. First, we add our clip into our HTML code:

<video controls width="250">  
  <source src="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4" type="video/mp4">  
  Sorry, your browser doesn't support embedded videos.  
</video>

Then we can add buttons to change various things like the playback rate or muting the audio as follows. First, we add some buttons to let us click to change the settings:

<button id='fast-button'>1.5x speed</button>
<button id='fastest-button'>2x speed</button>
<button id='mute'>Toggle Mute  </button>

Then we add some code to get the button and video elements and set the settings accordingly.

const fastButton = document.querySelector('#fast-button');  
const fastestButton = document.querySelector('#fastest-button');  
const muteButton = document.querySelector('#mute');  
const video = document.querySelector('video');

fastButton.onclick = () => {  
  video.playbackRate = 1.5  
}

fastestButton.onclick = () => {  
  video.playbackRate = 2  
}

muteButton.onclick = () => {  
  video.muted = !video.muted;  
}

In the code above, we get the elements and then in the click event handlers for the buttons, we set the playbackRate and toggle the muted properties for the video.

We can do something similar with the methods. For example, we can add the following buttons:

<button id='play'>Play</button>
<button id='pause'>Pause</button>

Then we can add the following buttons click handlers to play and pause the clip programmatically:

playButton.onclick = () => {  
  video.play();  
}

pauseButton.onclick = () => {  
  video.pause();  
}

This is handy for creating custom video and audio players that don’t use the default browser style, along with the controls attribute for showing or hiding the controls.

Another example is making a seek bar for our clip. We can do that by adding a range slider as follows:

<input type="range" name="time" id='time' min='0'>

Then we can set the max attribute of the slider to the duration of our clip and add an onchange event handler as follows:

timeInput.max = video.duration  
timeInput.onchange = (e) => {  
  video.currentTime = e.target.value;  
}

The let us seek to anywhere from the start to the end of the video as we slide back and forth with the slider.

Events

Audio and video elements also have the following events fired, so we can handle them with event handlers we wish to:

  • canplay — the browser can play the media, but estimates that not enough data will be available to finish playback without stopping to buffer.
  • canplaythrough — browser estimates that playback finish without stopping for more buffering
  • complete — playback ends
  • durationchange — duration has been updated
  • emptied — media has become empty
  • ended — playback ended before the end of the clip was reached
  • loadeddata — the first frame has finished loading
  • loadedmetadata — metadata has been loaded
  • pause — playback is paused
  • play — playback began
  • playing — playback is ready to start after having been paused or delayed due to lack of data
  • progress — fired periodically as browser loads a resource
  • ratechange — playback rate changed
  • seeked —seek operation completed
  • seeking — seek operation began
  • stalled —a user-agent tries to fetch media data, but nothing is coming in
  • suspend — media data loading has been suspended
  • timeupdate — the time indicated by the currentTime attribute has been updated
  • volumechange — volume changed
  • waiting — playback stopped because of a temporary lack of data