I added a subtitle file for the video or a VTT file, but it doesn't work. Why? In the PlyrJs player

Question

I added a subtitle file for the video or a VTT file, but it doesn't work. Why? In the PlyrJs player (https://plyr.io)

Translation file link : https://auto-play.000webhostapp.com/my_captions.vtt

video link : https://auto-play.000webhostapp.com/video.mp4

The word “Hi” should appear from 0 to 7 seconds

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.4/plyr.css" integrity="sha512-bMLolM8mWTXYQSC2gQOLyDdkmodSAbbRFbDoISUCRS7mFJrP3fBHJo3YR8+2Yy9n7+iVGawVpCe6KVd/E5+TNA==" crossorigin="anonymous" />

<style>
    .mydiv {
        width: 500px;
        height: 200px;
        margin-top: 200px
    }
</style>

<body>

<div class="mydiv">
    <video id="player" playsinline controls>
        <source src="https://auto-play.000webhostapp.com/video.mp4" type="video/mp4" />


        <!-- Captions are optional -->
        <track kind="captions" label="English captions" src="https://auto-play.000webhostapp.com/my_captions.vtt" srclang="en" default />
    </video>
</div>





<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.4/plyr.js" integrity="sha512-M/AUlH5tMMuhvt9trN4rXBjsXq9HrOUmtblZHhesbx97sGycEnXX/ws1W7yyrF8zEjotdNhYNfHOd3WMu96eKA==" crossorigin="anonymous"></script>

<script>
    const player1 = new Plyr('#player', {
        title: 'Example Title',
        quality: {
            default: 576,
            options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]
        }

    });
</script>

score 0 · Answer 1 · answered Mar 07 '21 at 20:21

Your WebVTT is not valid.

Your file reads:

WEBVTT - Some title

00:00.000 --> 00:07.1000
Hi

The ending ms range is 4 characters, and needs to be 3. You can use https://quuz.org/webvtt/ to validate your VTT file.

This is valid (I deleted a 0):

WEBVTT - Some title

00:00.000 --> 00:07.100
Hi

I added a subtitle file for the video or a VTT file, but it doesn't work. Why? In the PlyrJs player

1 Answers1