HTML onloadstart Event Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The onloadstart HTML event attribute is fired when the browser starts the loading process of an <audio> or <video> element. This means that the browser has begun looking for the specified audio or video file, but it has not yet begun downloading it.

The onloadstart event is typically used to perform actions such as:

Display a loading indicator to the user.
Disable other controls on the page until the audio or video has loaded.
Start a timer to track how long the audio or video takes to load.

To use the onloadstart event attribute, simply add it to the <audio> or <video> element that you want to listen for the event on. For example:

<video onloadstart="myFunction()">
  ...
</video>

The myFunction() function will be called when the browser starts loading the video.

Here is an example of a simple JavaScript function that you could use to display a loading indicator when the onloadstart event is fired:

function myFunction() {
  document.getElementById("loadingIndicator").style.display = "block";
}

The #loadingIndicator element in this example is a simple HTML element that is used to display a loading indicator to the user.

You can also use the onloadstart event to perform more complex tasks, such as tracking how long the audio or video takes to load and displaying that information to the user.

Syntax

<element onloadstart="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE HTML>

<html>

<body>



<audio id="myAudio" controls onloadstart="myFunction()">  

  <source src="audio.mp3" type="audio/mpeg">

  Your browser does not support the audio tag.

</audio>



<p>Play audio file:</p>



<script>

function myFunction() {

    alert("EXAMPLE: Started downloading the audio file");

}

</script> 



<p>This example shows how to use the onloadstart attribute for an AUDIO element.</p>



</body>

</html>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML onloadstart event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.