How to convert SRT file to VTT then append a video?

Help & Support
1

I am finding a way to convert SRT to VRT files for the past 2 weeks. After that, I want to add a video along with the converted file. Is there any way to do so?

2 Likes
2

Yes, please provide the solution to this question as I am also figuring out how to do this. Waiting for your reply.

1 Like
3

Hi! Here is the perfect answer to your query.

A mixture of JavaScript and HTML5 technologies can be used to convert an SRT (SubRip Subtitle) file to VTT (WebVTT Subtitle) format and add it to a video. These are the steps to accomplishing this:

1. SRT to VTT conversion

A small amount of content modification is required to convert an SRT file to VTT format. SRT and WebVTT are quite similar, however, WebVTT needs a particular header to be valid. Here is an illustration of how to convert the content of an SRT file to VTT format:

function srtToVtt(srtContent) {
    // Replace " --> " with " -->\n" to match WebVTT format
    const vttContent = srtContent.replace(/ --> /g, ' -->\n');
    // Add the "WEBVTT" header to the beginning of the file
    return "WEBVTT\n\n" + vttContent;
}

2. Download and add VTT to the video

   Suppose your HTML file contains a video element that looks like this:
<video id="myVideo" controls>
    <source src="path/to/video.mp4" type="video/mp4">
</video>

3. Let’s now use JavaScript to load the VTT subtitles and add them to the video element

function loadAndAppendVttToVideo(vttUrl) {
    fetch(vttUrl)
        .then(response => response.text())
        .then(vttContent => {
            const vttBlob = new Blob([vttContent], { type: 'text/vtt' });
            const vttUrl = URL.createObjectURL(vttBlob);

            const videoElement = document.getElementById('myVideo');
            const track = document.createElement('track');

            track.kind = 'subtitles';
            track.label = 'English';
            track.srclang = 'en';
            track.src = vttUrl;
            track.default = true;

            videoElement.appendChild(track);
        })
        .catch(error => {
            console.error('Error loading or appending VTT file:', error);
        });
}

// Usage
const srtUrl = 'path/to/subtitles.srt';
const vttUrl = 'path/to/subtitles.vtt';

fetch(srtUrl)
    .then(response => response.text())
    .then(srtContent => {
        const vttContent = srtToVtt(srtContent);
        const vttBlob = new Blob([vttContent], { type: 'text/vtt' });
        const vttFile = new File([vttBlob], 'subtitles.vtt', { type: 'text/vtt' });

        // You can optionally save the VTT file if needed
        saveVttFile(vttFile);

        // Load and append VTT to video
        loadAndAppendVttToVideo(vttUrl);
    })
    .catch(error => {
        console.error('Error loading or converting SRT file:', error);
    });

If you need to save the created VTT file to the user’s device for whatever reason, you can use the saveVttFile function in the piece of code above. Adding the VTT to the video element is not required.

Make sure the correct URLs are used to access your video file, the SRT and VTT subtitle files, and both. The VTT subtitles should be added to the video when the website loads and viewers will be able to switch between the subtitles using the controls for the video player.

Find more related to SRT here: