Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script when the media has started playing in HTML?
The onplaying attribute in HTML is used to execute a JavaScript function when an audio or video element starts playing. This event is triggered after the media has been paused and is resumed, or when it starts playing for the first time.
Syntax
Following is the syntax for using the onplaying attribute −
<video onplaying="functionName()">...</video> <audio onplaying="functionName()">...</audio>
The onplaying attribute can also be used with JavaScript event listeners −
element.addEventListener('playing', functionName);
Using onplaying with Video Element
Example
Following example demonstrates how to execute a script when a video starts playing −
<!DOCTYPE html>
<html>
<head>
<title>Video onplaying Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video Playing Event Demo</h2>
<video id="myVideo" width="400" height="240" controls onplaying="displayMessage()">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p id="status">Click play to start the video</p>
<script>
function displayMessage() {
document.getElementById("status").innerHTML = "Video is now playing!";
document.getElementById("status").style.color = "green";
}
</script>
</body>
</html>
When you click the play button, the video starts and the message changes to indicate it is playing −
Video Playing Event Demo [Video Player Controls] Video is now playing! (in green text)
Using onplaying with Audio Element
Example
The onplaying attribute works similarly with audio elements −
<!DOCTYPE html>
<html>
<head>
<title>Audio onplaying Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio Playing Event Demo</h2>
<audio controls onplaying="audioStarted()">
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.wav" type="audio/wav">
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="audioStatus" style="margin-top: 15px; padding: 10px; border: 1px solid #ccc;">
Press play to start the audio
</div>
<script>
function audioStarted() {
var statusDiv = document.getElementById("audioStatus");
statusDiv.innerHTML = "? Audio is currently playing...";
statusDiv.style.backgroundColor = "#e8f5e8";
statusDiv.style.color = "#2d5016";
}
</script>
</body>
</html>
When the audio starts playing, the status message updates with a speaker icon and green background −
Audio Playing Event Demo [Audio Player Controls] ? Audio is currently playing... (green background)
Using addEventListener Method
Instead of using the onplaying attribute directly in HTML, you can also attach the event listener using JavaScript −
Example
<!DOCTYPE html>
<html>
<head>
<title>addEventListener for playing Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Media Playing Event with addEventListener</h2>
<video id="demoVideo" width="350" height="200" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<ul id="eventLog" style="margin-top: 20px; padding: 10px; background-color: #f9f9f9;">
<li>Event log will appear here...</li>
</ul>
<script>
var video = document.getElementById("demoVideo");
var log = document.getElementById("eventLog");
video.addEventListener('playing', function() {
var timestamp = new Date().toLocaleTimeString();
log.innerHTML = "<li>Video started playing at: " + timestamp + "</li>";
});
video.addEventListener('pause', function() {
var timestamp = new Date().toLocaleTimeString();
log.innerHTML += "<li>Video paused at: " + timestamp + "</li>";
});
</script>
</body>
</html>
This example logs both playing and pause events with timestamps −
Media Playing Event with addEventListener [Video Player Controls] ? Video started playing at: 2:30:45 PM ? Video paused at: 2:31:12 PM
Common Use Cases
The onplaying event is commonly used for the following purposes −
Analytics tracking − Track when users start playing media content
User interface updates − Show play indicators or update control states
Loading additional content − Trigger loading of related videos or recommendations
Accessibility notifications − Announce to screen readers that media is playing
Custom player controls − Synchronize custom control buttons with media state
Conclusion
The onplaying attribute provides a simple way to execute JavaScript code when audio or video elements start playing. It can be used directly in HTML or attached via JavaScript event listeners. This event is essential for creating interactive media experiences and tracking user engagement with multimedia content.
166 Views
