I am using Node/Express to send an mp4 video to the frontend for which I am using angular. The video is being sent smoothly and everything's working perfectly. Now, I want to send the VTT file that contains the subtitles, along with the mp4. I do not know how to do that? I have tried searching but, couldn't find any help. Here's my code:
Node/Express
router.get('/playVideo', (req, res) => {
const path = "videos/testVideo.mp4";
const pathSubtitle = "videos/testsub.vtt";
const stat = fs.statSync(path);
const fileSize = stat.size;
const head = {
'Content-Length': fileSize,
'Accept-Ranges' : 'bytes',
'Content-Type': 'video/mp4'
}
res.writeHead(200, head);
fs.createReadStream(path).pipe(res);
});
Angular
<div class="container-fluid">
<br>
<div class="jumbotron-fluid">
<video id = "videoPlayer" controls preload = "metadata" style = "width:
65%; position: fixed; border: 2px solid #7c2c6c;">
<source src="http://localhost:3000/playVideo" autoplay type =
"video/mp4">
</video>
</div>
</div>
How can I attach the subtitle file with the video response? Or, link to any other documentation that explains that in detail?
Serve the vtt file on a different url (for example /playVideo.vtt) then use the track element to display it:*
<video id = "videoPlayer" controls preload = "metadata" style = "width:
65%; position: fixed; border: 2px solid #7c2c6c;">
<source src="http://localhost:3000/playVideo" autoplay type =
"video/mp4">
<track default src="http://localhost:3000/playVideo.vtt">
</video>
You can read more here: https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#within_site_css and here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track
*code has not been tested yet