Automatically add WebVTT subtitles in browser
Question
Here is the situation:
I have a .mp4 file on my server. When I make a request to it ( https://domain.name/file.mp4 ) my browser automatically play it. I have a file.vtt subtitle in the same folder, accessible at https://domain.name/file.vtt ).
Here is the html code I get when I request the file.mp4:
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body style="margin: 0px;"><video controls="" autoplay="" name="media">
<video controls="" autoplay="" name="media">
<source src="https://domain.name/file.mp4" type="video/mp4">
</video>
</body>
</html>
When I add this on my browser while inspecting the page:
<track label="English" kind="subtitles" srclang="en" src="https://domain.name/file.vtt" default>
the subtitle works as intented.
Is it possible to do it automatically? That if I request the file.mp4, the browser looks for a vtt file with the same name and automatically add it to player?
Should I write some php which will find those subtitles at each .mp4 file request? Is there another way to do it?
I didn't create any html code on the server side, nginx serves the .mp4 files when they are requested and I think the browser on its own render the player, am I wrong? Is it possible to do it only with Nginx?
1 answers
solution1
0 2017-08-20 11:26:52
"Is it possible to do it automatically? That if I request the file.mp4, the browser looks for a vtt file with the same name and automatically add it to player?"
The browser does not search for any unspecified files. You must add the subtitle filename in the video tag of your html code.
Try :
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body style="margin: 0px;"><video controls="" autoplay="" name="media">
<video controls="" autoplay="" name="media">
<source src="https://domain.name/file.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="https://domain.name/file.vtt" default>
</video>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.