Подписи plyr не отображаются/не работают в моем next.js ⇐ Jquery

[Anonymous]

Я использую https://plyr.io/, а это документ (https://github.com/sampotts/plyr), который я использовал в своем Next.js
и думаю, что настраиваю подписи. vtt правильно Вот это код index.tsx

Код: Выделить всё

import DefaultLayout from "@/layouts/default";
import Plyr from "plyr";
import "plyr/dist/plyr.css";
import "plyr-react/plyr.css";

export default function DocsPage() {
const playerRef = useRef(null);

useEffect(() => {
if (playerRef.current) {
const player = new Plyr(playerRef.current, {
controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'speed', 'settings', 'pip', 'fullscreen'],
settings: ['captions', 'quality', 'speed'],
captions: { active: true, update: true, language: 'auto' },
});

player.source = {
type: 'video',
title: 'I Hate this problem',
sources: [
{ src: 'http://00.00.000.000/1080P', type: 'video/mp4', size: 1080 },
{ src: 'http://00.00.000.000/720P', type: 'video/mp4', size: 720 },
{ src: 'http://00.00.000.000/480P', type: 'video/mp4', size: 480 },
{ src: 'http://00.00.000.000/360P', type: 'video/mp4', size: 360 },
{ src: 'http://00.00.000.000/240P', type: 'video/mp4', size: 240 },
],
tracks: [
{
kind: 'captions',
label: 'Thai',
srcLang: 'th',
src: '/eample/captions_TH.vtt',
},
{
kind: 'captions',
label: 'English',
srcLang: 'en',
src: '/eample/captions_EN.vtt',
},
]
};
}
}, []);

return (



I Hate this problem








);
}

Все в порядке Plyr может воспроизводить видео, но CC не показывает
example.vtt
WEBVTT
1
00:01:21.290 --> 00:01:22.499
АЛЯ ИНОГДА
СКРЫВАЕТ СВОИ ЧУВСТВА НА РУССКОМ ЯЗЫКЕ
2
00:01:31.175 --> 00:01:32.384
ЭПИЗОД 12: ВЗГЛЯД В БУДУЩЕЕ
3
00:01:32.467 --> 00: 01:35.387
Если мне чего-то не хватает
как кандидату в президенты,
4
00:01:35.470 --> 00:01:37.431
пожалуйста, не стесняйтесь меня критиковать.
5
00:01:37.973 --> 00:01:40.809
Спасибо, что выслушали .

Код: Выделить всё

**How to fix it?**

и Где начинается проблема
Мне просто нужно это исправить, потому что я использовал все свои известные возможности и потратил 12 часов, чтобы исправьте это, но оно все еще не работает, пожалуйста, помогите мне исправить это и научите меня, как сделать так, чтобы не было ошибок с самого начала

Подробнее здесь: https://stackoverflow.com/questions/790 ... my-next-js