Search code examples
htmlvideosubtitlewebvtt

Why don't my vtt subtittles show up on my html5 video?

I'm trying to use subtitles with my HTML5 video tag, but I can't get this to work. I think the issue is that the video source isn't a local file. Does anyone know how I can get around this? 

<html>
<head>
    <style id="stndz-style"></style>
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <video id="video" controls autoplay="" name="media">
        <source src="http://localhost:8888/" type="video/mp4">
        <track label="Dutch" kind="subtitles" srclang="nl" src="/home/ubuntu/Desktop/scripts/example.vtt" default>
    </video>
</body>
</html>

and this is my example.vtt:

WEBVTT

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.
Solution

  • Turns out that cromium not letting me use local files was the issue. So my workaround is to run chromium like this:

    chromium --allow-file-access-from-files