Horje
HTML onloadstart Event 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:

  1. loadstart
  2. durationchange
  3. loadedmetadata
  4. loadeddata
  5. progress
  6. canplay
  7. 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:

Browser Support of HTML onloadstart Event Attribute

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 video is starting to load

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:

How to alert that the audio is starting to load


html event attributes

Related Articles
List of Media Events HTML Media Events Attribute
HTML onabort Event Attrribute HTML Media Events Attribute
HTML oncanplay Event Attribute HTML Media Events Attribute
HTML oncanplaythrough Event Attribute HTML Media Events Attribute
HTML ondurationchange Event Attribute HTML Media Events Attribute
HTML onended Event Attribute HTML Media Events Attribute
HTML onerror Event Attribute HTML Media Events Attribute
HTML onloadeddata Event Attribute HTML Media Events Attribute
HTML onloadedmetadata Event Attribute HTML Media Events Attribute
HTML onloadstart Event Attribute HTML Media Events Attribute

Single Articles
Example of HTML onloadstart Event Attribute HTML Media Events Attribute
Definition and Usage of HTML onloadstart Event Attribute HTML Media Events Attribute
Browser Support of HTML onloadstart Event Attribute HTML Media Events Attribute
Syntax of HTML onloadstart Event Attribute HTML Media Events Attribute
Attribute Values of HTML onloadstart Event Attribute HTML Media Events Attribute
Technical Details of HTML onloadstart Event Attribute HTML Media Events Attribute
How to alert that the video is starting to load HTML Media Events Attribute
How to alert that the audio is starting to load HTML Media Events Attribute

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

Read Article

https://horje.com/learn/1434/reference

 

Horje