在 JavaScript 中逐行动态添加字幕到视频元素

const captions_array = [
  { start: 0, end: 2, message: "hello" }, 
  { start: 3, end: 4, message: "how" }, 
  { start: 5, end: 8, message: "are" }
];
const VTTFile = makeVTT( captions_array );
const vid = document.querySelector( "video" );
const track = document.createElement( "track" );
track.kind = "captions";
track.label = "English";
track.srclang = "en";
track.src = URL.createObjectURL( VTTFile );
vid.addEventListener( "loadedmetadata", (evt) => {
  track.mode = "showing";
  vid.textTracks[0].mode = "showing"; // thanks Firefox 
});
vid.append( track );

function makeVTT( array ) {
  const text = array.reduce( (str, { start, end, message }, index) => {
    // you would also have to make a "seconds to timestamp" parser
    // but I leave it to the reader as an exercise
    return str + `
00:00:${ start.toFixed(3).padStart(6, "0") } --> 00:00:${ end.toFixed(3).padStart(6, "0") }
${ message }`;
  }, `WEBVTT`);
  return new Blob( [ text ], { type: "text/plain" } );
}

video { max-height: 100vh; max-width: 100vw; }

<video controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
</video>