revision:
These attributes are part of the event attributes and can be used on the following elements:<audio>, <video>.
During the loading process of an audio/video, the following events occur, in this order: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough
This attribute fires when an object has been loaded.
"onload" is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well.
The onload attribute is part of the event attributes and can be used on the following elements: <body>, <iframe>, <img>, <input>, <link>, <script>, <style>.
For input elements, the onload attribute is only supported when <input type="image">.
The "onload attribute" can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.
This attribute contains single value script and it runs when onload event is triggered.
codes:
<body onload="loadFunction()">
<h4>Hello World!</h4>
</body>
<script>
function loadFunction() {
alert("Page is loaded");
}
</script>
codes:
<img src="cartoon.jpg" onload="loadImage()" width="150" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
This attribute contains single value script which works when onloadeddata event attribute is called.
example audio:
<audio style="margin-left:3vw;" id="myAudio" controls onloadeddata="playAudio()">
<source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<p class="spec">Play the audio file:</p>
<script>
function playAudio() {
alert("audiop data is loaded");
}
</script>
example video
<video style="margin-left:3vw;" id="myVideo" width="320" height="176"
controls onloadeddata="playVideo()">
<source src="Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
function playVideo() {
alert("video data is loaded");
}
</script>
The event occurs when meta data for the specified audio/video has been loaded. Meta data for audio/video consists of: duration, dimensions (video only) and text tracks.
This attribute contains single value script which works when onloadedmetadata event attribute is called.
example audio
<audio style="margin-left:3vw;" id="myAudio" controls onloadedmeta data="playAudio()">
<source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<p class="spec">Play the audio file:</p>
<script>
function playAudio() {
alert("audio meta data is loaded");
}
</script>
example video
<video style="margin-left:3vw;" id="myVideo" width="320" height="176"
controls onloadeddata="playVideo()">
<source src="Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
function playVideo() {
alert("video meta data is loaded");
}
</script>
This is when the loading process starts.
This attribute contains single value script which works when onloadstart event attribute is called.
example audio
<audio style="margin-left:3vw;" id="myAudio" controls onloadstart="myAudio()">
<source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<p class="spec">Play the audio file</p>
<script>
function myAudio() {
alert("The audio file has started loading");
}
</script>
example video:
<video style="margin-left:3vw;" id="myVideo" width="320" height="176" controls
onloadstart="myVideo()">
<source src="Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<p class="spec">Play the video:</p>
<script>
function myVideo() {
alert("The video file has started loading");
}
</script>