Let’s say you have a video file and an srt subtitle file. This simple HTML program can load those files and play the video with its subtitle:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player with Subtitles</title>
<style>
video { width: 600px; display: block; margin-bottom: 10px; }
#subtitle { font-size: 20px; color: white; background: black; padding: 5px; text-align: center; width: 600px; position: absolute; bottom: 10px; display: none; }
#videoContainer { position: relative; display: inline-block; }
</style>
</head>
<body>
<h2>Video Player with SRT Subtitles</h2>
<input type="file" id="videoFile" accept="video/*"> <br><br>
<input type="file" id="srtFile" accept=".srt"> <br><br>
<div id="videoContainer">
<video id="video" controls></video>
<div id="subtitle"></div>
</div>
<script>
let subtitles = [];
let subtitleIndex = 0;
document.getElementById('videoFile').addEventListener('change', function(event) {
let file = event.target.files[0];
let url = URL.createObjectURL(file);
document.getElementById('video').src = url;
});
document.getElementById('srtFile').addEventListener('change', function(event) {
let file = event.target.files[0];
let reader = new FileReader();
reader.onload = function() {
subtitles = parseSRT(reader.result);
};
reader.readAsText(file);
});
function parseSRT(data) {
let srtArray = [];
let lines = data.split(/\r?\n/);
let temp = {};
for (let i = 0; i < lines.length; i++) {
if (lines[i].trim() === "") {
srtArray.push(temp);
temp = {};
} else if (!temp.startTime) {
let time = lines[i].split(' --> ');
temp.startTime = time[0].replace(',', '.');
temp.endTime = time[1].replace(',', '.');
} else {
temp.text = (temp.text ? temp.text + " " : "") + lines[i];
}
}
return srtArray;
}
document.getElementById('video').addEventListener('timeupdate', function() {
let video = document.getElementById('video');
let subtitleDiv = document.getElementById('subtitle');
if (subtitles.length > 0 && subtitleIndex < subtitles.length) {
let sub = subtitles[subtitleIndex];
let videoTime = video.currentTime;
let startTime = parseSRTTime(sub.startTime);
let endTime = parseSRTTime(sub.endTime);
if (videoTime >= startTime && videoTime <= endTime) {
subtitleDiv.innerText = sub.text;
subtitleDiv.style.display = 'block';
} else if (videoTime > endTime) {
subtitleDiv.style.display = 'none';
subtitleIndex++;
}
}
});
function parseSRTTime(timeString) {
let parts = timeString.split(':');
return (parseInt(parts[0]) * 3600) + (parseInt(parts[1]) * 60) + parseFloat(parts[2]);
}
</script>
</body>
</html>