怎么在视频上方添加字幕

在视频中添加字幕可以为观众提供更好的观看体验，让视频内容更加清晰明了。本文将介绍如何在视频上方添加字幕，并提供相应的代码示例。

一、在 HTML 中添加视频

首先，我们需要在 HTML 中添加视频。可以使用 <video> 标签来添加视频，如下所示：

<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser doesn't support HTML5 video tag.
</video>

其中，width 和 height 分别表示视频的宽度和高度；controls 表示在视频下方添加控制条。

二、在 HTML 中添加字幕

接下来，我们需要在 HTML 中添加字幕。可以使用 <track> 标签来添加字幕，如下所示：

<track label="English" kind="subtitles" src="english.vtt" default>
<track label="Chinese" kind="subtitles" src="chinese.vtt">

其中，label 表示字幕的标签，kind 表示字幕的类型，src 表示字幕文件的地址，default 表示默认开启字幕。需要注意的是，字幕文件需要使用特定的格式，比如 WebVTT 格式。

三、使用 JavaScript 控制字幕的显示

最后，我们需要使用 JavaScript 控制字幕的显示。可以通过 <video> 标签的 textTracks 属性获取字幕轨道，进而控制字幕的显隐和内容。如下所示：

var video = document.getElementsByTagName("video")[0];
var track = video.textTracks[0];
track.mode = "showing";
track.oncuechange = function() {
  var cue = this.activeCues[0];
  var subtitles = document.getElementById("subtitles");
  if (cue) {
    subtitles.innerHTML = cue.text;
  } else {
    subtitles.innerHTML = "";
  }
}

其中，video 表示视频元素，track 表示字幕轨道，mode 表示字幕的显示模式，oncuechange 表示在字幕改变时触发的函数。在函数中，可以通过 activeCues 获取当前的字幕，并将其显示在网页上。

四、完整的代码示