HTML onloadstart Event Attribute - HTML Media Events Attribute

The HTML onloadstart event attribute is a media event that occurs when the browser begins the loading process for an audio or video element. This signifies the very initial stage of media loading, before any actual data or metadata has been received.

Example of HTML onloadstart Event Attribute

It will alert that the video is starting to load.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert('Starting to load video');
}
</script>

<video controls onloadstart="myFunction()">
  <source src="https://file-examples.com/wp-content/storage/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
  <source src="https://file-examples.com/wp-content/storage/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

Definition and Usage of HTML onloadstart Event Attribute

The loadstart event occurs when the browser starts looking for the specified audio/video. This is when the loading process starts.

During the loading process of an audio/video, the following events occur, in this order:

loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

Browser Support of HTML onloadstart Event Attribute

The numbers in the table specify the first browser version that fully supports the event.

Output should be:

Syntax of HTML onloadstart Event Attribute

<element onloadstart="script">

Attribute Values of HTML onloadstart Event Attribute

Value	Description
script	The script to be run when the loading process starts

Technical Details of HTML onloadstart Event Attribute

Supported HTML tags:	<audio> and <video>

How to alert that the video is starting to load

See the Example.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert('Starting to load video');
}
</script>

<video controls onloadstart="myFunction()">
  <source src="https://file-examples.com/wp-content/storage/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
  <source src="https://file-examples.com/wp-content/storage/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

Output should be:

How to alert that the audio is starting to load

See the Example.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert('Starting to load audio');
}
</script>


<audio controls onloadstart="myFunction()">
  <source src="https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/" type="audio/ogg">
  <source src="https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body> 
</html>

Output should be:

html event attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Media Events Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference