如何在html中为视频添加字幕？ [英] How to add subtitles to a video in html?

问题描述

我尝试使用 track 元素，但它没有用。你能不能告诉我是否有什么我做错了？

I tried using the track element, but it didn't work..could you please tell me if there's something I am doing wrong?

<video controls="controls" id="video1" width="450">
    <source src="A taste of TED.mp4" type="video/mp4">
    <track src="TED.vtt" kind="subtitles" srclang="en" label="English">
 </video>

字幕文件（ TED.vtt ）看起来像这样：

The subtitle file (TED.vtt) looks like this:

WEBVTT

1
00:00:01.000 --> 00:00:10.000
This is the first line of text, displaying from 1-10 seconds

2
00:00:15.000 --> 00:00:20.000
And the second line of text
separated over two lines

推荐答案

代码：

<video controls="controls" id="video1" width="450">
    <source src="A taste of TED.mp4" type="video/mp4" />
    <track src="TED.vtt" kind="subtitles" srclang="en" label="English" />
</video>

工作。您可能做错的是您使用 .srt 字幕而不是 .vtt

Works. What you may be doing wrong is that you are using .srt subtitles instead of .vtt

srt：

1
00:01:21,700 --> 00:01:24,675
Life on the road is something 
I was raised to embrace.

vtt：

WEBVTT

01:21.700 --> 01:24.675
Life on the road is something 
I was <i>raised</i> to embrace.

您需要做的是：

• 使用WEBVTT启动文本文件


• 删除每个字幕开头的提示标记，或用Cue - 前缀替换它们。


• （可选）在每个时间戳的开头删除00：小时标记。


• 将每个时间戳中毫秒标记前的逗号转换为小数点（使用find-replace：，7到.7，例如）。


• （可选）在样式标记文本中添加样式标记。


• 保存文件.vtt扩展名并从HTML5页面中的元素链接到它。

• Start the text file with WEBVTT
• Remove the cue markers at the start of each subtitle, or replace them with Cue - prefixes.
• Optionally, remove the 00: hour marker at the start of each timestamp.
• Convert the comma before the millisecond mark in every timestamp to a decimal point (easy enough with a find-replace: ,7 to .7, for example).
• Optionally, add styling markup to the subtitle text.
• Save the file with a .vtt extension and link to it from a element in an HTML5 page.

此外，您的网络订书机可能不支持视频标签，我知道某些手机不播放视频有这个标签！

Also it may be possible that your web bowser does not support the video tag, I know for example that some cellphones do not play videos with this tag!

• 答案的第二部分取自帖子。

• The second part of the answer was taken from a post by Dudley Storey.

这篇关于如何在html中为视频添加字幕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！