0

I'm trying to create a (.mp4 format) video with .vtt subtitles. The only thing that appears on screen are one or two black lines in the centre of the video where the subtitles should be, and only on Chrome. It works fine in e.g. Edge. Why aren't they appearing? The files are uploaded onto a server.

<html>
<head>
    <style>
        .container {
            margin: 0px 0px;
            max-width: 500px;
        }
    </style>
</head>
<body>
    <div class="container" id="player">
        <video controls crossorigin playsinline poster="poster.png">
             <source src="TSR.mp4" type="video/mp4" size="576">
                <source src="TSR.mp4" type="video/mp4" size="720">
                <source src="TSR.mp4" type="video/mp4" size="1080">

                <!-- Caption files -->
                <track kind="captions" label="English" srclang="en" src="subtitles/vtt/english.vtt" default>
                <track kind="captions" label="Czech" srclang="cz" src="subtitles/vtt/czech.vtt">
                <!-- Fallback for browsers that don't support the <video> element -->
                <a href="Test Screen Recording.mp4" download>Download</a>
        </video>
    </div>
    <script src="https://cdn.plyr.io/3.4.4/plyr.polyfilled.js"></script>
    <script>const player = new Plyr('#player');</script>
</body>

.vtt file (sample):

WEBVTT

1
00:00:00.000 --> 00:00:03.000 
This is a test screen recording.

Screenshot:

Screenshot of black lines

Emily
  • 97
  • 1
  • 12

1 Answers1

0

Delete the number 1 in vtt file

HSN
  • 1
  • 2