请求提供<track kind="chapters">元素的实际可用示例并排查代码无效问题

Hey there! Let's get your chapter tracks working properly. The most common culprit here is usually an incorrectly formatted VTT file—browsers are pretty strict about following the standard. Let me walk you through a complete, working example step by step.

Correct VTT Chapter File Example (English: html-lesson-en.vtt) #

First, your chapter files need to start with WEBVTT and follow a strict timestamp + title structure. Here's a valid example:

WEBVTT

00:00:00.000 --> 00:00:30.000
Introduction to HTML Basics

00:00:30.001 --> 00:01:15.000
Setting Up Your First HTML Document

00:01:15.001 --> 00:02:00.000
Working with HTML Tags and Elements

00:02:00.001 --> 00:02:45.000
Styling with Inline CSS

Armenian Chapter File Example (html-lesson-hy.vtt) #

For your Armenian chapters, make sure the file is saved with UTF-8 encoding to display characters correctly:

WEBVTT

00:00:00.000 --> 00:00:30.000
HTML-ի հիմունքներին ներդրում

00:00:30.001 --> 00:01:15.000
Ձեր առաջին HTML փաստաթուղթը ստեղծել

00:01:15.001 --> 00:02:00.000
HTML տեգերի և տարրերի հետ աշխատանք

00:02:00.001 --> 00:02:45.000
Անլայն CSS-ով ոճավորում

Complete HTML Code #

Here's your original code with proper context (just ensure the VTT files are in the same folder as your HTML file, or adjust the src paths if they're in a subdirectory):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Lesson with Chapters</title>
</head>
<body>
    <video width="500" height="400" controls>
        <source src="html-lesson.mp4" type="video/mp4">
        <track src="html-lesson-hy.vtt" kind="chapters" srclang="hy" label="Armenian">
        <track src="html-lesson-en.vtt" kind="chapters" srclang="en" label="English" default>
    </video>
</body>
</html>

Key Checks to Ensure It Works #

• VTT Structure: Never skip the opening WEBVTT line. Timestamps must use the HH:MM:SS.mmm format, and each chapter needs a clear title after the timestamp range.
• File Paths: Verify your VTT files are in the correct location relative to your HTML file. If they're in a folder named subtitles, use src="subtitles/html-lesson-en.vtt".
• Encoding: Save all VTT files as UTF-8 (this is non-negotiable for non-Latin scripts like Armenian).
• Accessing Chapters: To view the chapter list, right-click the video and look for the "Chapters" option, or click the three-dot menu in the video controls to find it.

If it still doesn't work, double-check that your video file is properly encoded and that the VTT timestamps match the actual content of your video.

内容的提问来源于stack exchange，提问作者Samvel Ghumashyan