revision:
The ontimeupdate attribute defines a script to run when the playing position of an audio/video has changed.
The ontimeupdate attribute is part of the event attributes, and can be used on the following elements: <audio> and <video>.
This event is invoked by playing the audio/video and moving the playback position (like when the user fast forwards to a different point in the audio/video)
<element ontimeupdate="script"></element>
script: the script to be run on ontimeupdate.
Move to a new position in the audio:
codes:
<p class="spec" id="demo">Move to a new position in the
audio:</p>
<audio style="margin-left:3vw;" id="myAudio" controls
ontimeupdate="audioFunction()">
<source src="../pics/horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<script>
function audioFunction() {
document.getElementById("demo").innerHTML = "You moved
to position " + document.
getElementById("myAudio").currentTime;
}
</script>
Move to a new position in the video:
HTML codes:
<p class="spec" id="demo-1">Move to a new position in the
video:</p>
<video style="margin-left:3vw;" id="myVideo" width="320"
height="176" controls ontimeupdate=
"videoFunction()">
<source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
function videoFunction() {
document.getElementById("demo-1").innerHTML = "You moved
to position " +
document.getElementById("myVideo").currentTime;
}
</script>
The ontoggle attribute fires when the user opens or closes a <details> element. The <details> element specifies additional details that the user can view or hide on demand.
The ontoggle attribute is part of the event attributes and can be used on the following element: <details>.
<element ontoggle="script></element>
script: this attribute contains single value script which works when the ontoggle event is called.
Open the details.
- by ... . All Rights Reserved.
All content and graphics on this web site are the property of . . . . .
codes:
<p class="spec">Open the details.</p>
<details style="margin-left:3vw;" ontoggle="myDetails()">
<summary>Copyright 1999-2014.</summary>
<p class="spec"> - by ... . All Rights Reserved.</p>
<p class="spec">All content and graphics on this web site are
the property of . . . . .</p>
</details>
<script>
function myDetails() {
alert("The ontoggle event occured");
}
</script>
Click below to open the details.
Hyper Text Markup Language
codes:
<p class="spec">Click below to open the details.</p>
<details style="margin-left:3vw;" ontoggle="more()">
<summary style="color:blue";>What is the fullform of
HTML</summary>
<p class="spec">Hyper Text Markup Language</p>
</details>
<script>
function more() {
alert("The ontoggle event triggered");
}
</script>