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 cue changes in a element in HTML?
The oncuechange event attribute executes a script when the active cue changes in a <track> element. This event is particularly useful for video and audio elements that use text tracks for subtitles, captions, or descriptions.
The oncuechange event fires whenever the browser switches from one cue to another in a text track, allowing developers to respond to subtitle changes, implement custom subtitle styling, or trigger other actions based on the current cue.
Syntax
Following is the syntax for the oncuechange attribute −
<track oncuechange="script">
Where script is the JavaScript code to execute when the cue changes.
Parameters
The oncuechange attribute accepts a single parameter −
- script − The JavaScript function or code to execute when the active cue changes in the text track.
Basic Example
Following example demonstrates a simple alert when the cue changes −
<!DOCTYPE html>
<html>
<head>
<title>Basic oncuechange Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with Cue Change Alert</h2>
<video width="400" height="200" controls>
<source src="/html5/sample-video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English"
oncuechange="alert('Cue changed!')">
Your browser does not support the video element.
</video>
</body>
</html>
When subtitles change during video playback, an alert dialog appears indicating the cue change.
Advanced Example with Custom Function
Following example shows how to use a custom JavaScript function to handle cue changes −
<!DOCTYPE html>
<html>
<head>
<title>Advanced oncuechange Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with Custom Cue Change Handler</h2>
<video id="myVideo" width="400" height="200" controls>
<source src="/html5/sample-video.mp4" type="video/mp4">
<track id="subtitle-track" src="subtitles.vtt" kind="subtitles" srclang="en"
label="English" oncuechange="handleCueChange()">
Your browser does not support the video element.
</video>
<div id="cue-info" style="margin-top: 10px; padding: 10px; background: #f0f0f0;">
<strong>Current Cue:</strong> <span id="current-cue">None</span>
</div>
<script>
function handleCueChange() {
var track = document.getElementById('subtitle-track').track;
var activeCues = track.activeCues;
var cueDisplay = document.getElementById('current-cue');
if (activeCues.length > 0) {
cueDisplay.textContent = activeCues[0].text;
} else {
cueDisplay.textContent = 'None';
}
console.log('Cue changed at: ' + new Date().toLocaleTimeString());
}
</script>
</body>
</html>
This example displays the current subtitle text below the video and logs the time when each cue change occurs. The function accesses the track's active cues and updates the display accordingly.
Using oncuechange with JavaScript Event Listeners
Instead of using the inline oncuechange attribute, you can also add event listeners using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Event Listener Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with JavaScript Event Listener</h2>
<video id="video-player" width="400" height="200" controls>
<source src="/html5/sample-video.mp4" type="video/mp4">
<track id="subtitle-track" src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video element.
</video>
<div id="status" style="margin-top: 10px; font-weight: bold;">Status: Ready</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var track = document.getElementById('subtitle-track');
var status = document.getElementById('status');
track.addEventListener('cuechange', function() {
status.textContent = 'Status: Cue changed at ' + new Date().toLocaleTimeString();
// Access the text track
var textTrack = this.track;
if (textTrack.activeCues.length > 0) {
console.log('Active cue text:', textTrack.activeCues[0].text);
}
});
});
</script>
</body>
</html>
This approach separates the JavaScript logic from the HTML markup and provides more flexibility for complex event handling.
Browser Compatibility
The oncuechange event is supported in modern browsers that support HTML5 video and the WebVTT (Web Video Text Tracks) format. This includes Chrome, Firefox, Safari, and Edge. However, older browsers may not support this feature.
Common Use Cases
The oncuechange event is commonly used for −
- Custom subtitle styling − Applying different styles based on the current cue content
- Analytics tracking − Recording which subtitles users are viewing
- Interactive features − Triggering actions based on specific subtitle content
- Accessibility enhancements − Providing additional context or navigation aids
Conclusion
The oncuechange event attribute provides a powerful way to respond to subtitle and caption changes in HTML5 video elements. It enables developers to create interactive video experiences, implement custom subtitle features, and enhance accessibility by executing JavaScript code whenever the active cue changes in a text track.
172 Views
