如何播放视频w/内置在html5的字幕

how to play video w/ built in subtitle in html5?

本文关键字：内置 html5 字幕 视频 何播放 播放      更新时间：2023-09-26

我有内置字幕的mp4和mkv文件，我想在html5中播放并显示内置字幕，我试过这个

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

但是行不通

浏览器需要支持这一点，但据我所知，没有主要的浏览器支持这种渐进式视频。你应该考虑提取字幕并加载它们。有几种工具可以提取字幕，例如CCextractor或MP4Box。

您可以将它们作为轨道添加到video元素中，如Mozilla Developer Network中所述:

<video id="video" controls preload="metadata">
  <source src="video/sintel-short.mp4" type="video/mp4">
  <source src="video/sintel-short.webm" type="video/webm">
  <track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
  <track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt">
  <track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt">
</video>

然而，这只适用于VTT文件，也可能存在跨浏览器问题。有几个网络播放器也支持不同的字幕格式，JWPlayer或Bitmovin Player。

媒体播放器如WindowsMediaPlayer等使用与视频文件在同一文件夹中的字幕文件在屏幕上显示字幕。如果您想这样做，则需要在视频标记中添加一个嵌套的track标记。看这个

相关文章：