如何在 HTML 中在视频上编写文本

在视频上编写文本是一种常见的视频制作技巧，可以方便地在视频中显示相关的字幕或指引。在 HTML 中，实现这一效果也是相当容易的。

使用 <video> 标签

在 HTML5 中，我们可以使用 <video> 标签嵌入视频文件。在此基础上，我们可以使用 <track> 标签来添加字幕或文本。具体代码如下：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track label="English" kind="subtitles" srclang="en" src="english.vtt">
  <track label="中文" kind="subtitles" srclang="zh" src="chinese.vtt">
</video>

其中，<track> 标签用于定义字幕轨道，label 属性为字幕显示的名称，kind 属性表示字幕的类型为字幕（subtitles）或字幕说明（captions），srclang 属性定义字幕的语言，src 属性指定字幕文件的 URL。

同时，为了让字幕显示在视频上方而不是下方，我们可以使用 CSS 样式来设置字幕的显示位置：

video::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 1.2em;
  position: absolute;
  bottom: auto;
  top: 0;
}

在上述代码中，video::cue 用于选择字幕，position 属性指定字幕的位置为绝对定位，并将 bottom 属性设为 auto，将 top 属性设为 0，从而将字幕显示在视频上方。

使用 JavaScript 实现更复杂的效果

除了使用 <track> 标签编写简单的字幕效果外，我们还可以使用 JavaScript 实现更复杂的效果。例如，在视频上方添加淡入淡出的文本提示：

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<div id="textOverlay">
  <p id="text"></p>
</div>

在上述 HTML 代码中，我们在视频上方添加了一个文本提示框，用于显示需要提示的文本。

#textOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

#text {
  font-size: 2em;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

在上述 CSS 样式中，我们将文本提示框与文本都设置为绝对定位，并将文本提示框的显示方式设置为隐藏。

const video = document.querySelector('#myVideo');
const textOverlay = document.querySelector('#textOverlay');
const text = document.querySelector('#text');
const lines = [{
    time: 0,
    text: '这是第一行文本'
  },
  {
    time: 5,
    text: '这是第二行文本'
  },
  {
    time: 10,
    text: '这是第三行文本'
  }
];

let currentLine = -1;

video.addEventListener('timeupdate', () => {
  const currentTime = video.currentTime;
  const nextLine = lines.findIndex(line => line.time > currentTime);
  if (nextLine !== currentLine) {
    currentLine = nextLine;
    const line = lines[currentLine];
    text.innerHTML = line.text;
    textOverlay.style.display = 'block';
    setTimeout(() => {
      text.style.opacity = 1;
    }, 50);
    setTimeout(() => {
      textOverlay.style.display = 'none';
      text.style.opacity = 0;
    }, 3000);
  }
});

在上述 JavaScript 代码中，我们首先获取了视频元素、文本提示框和文本元素，并创建了一个 lines 数组，用于存储需要提示的文本内容和出现的时间。

然后，我们添加了一个 timeupdate 事件监听器，该事件在视频时间更新时触发。在事件处理函数中，我们根据当前时间找到需要出现的文本，并将文本内容赋值给文本元素。然后，我们将文本提示框显示出来，并在 50 毫秒后将文本的不透明度设置为 1，从而实现淡入效果。最后，我们使用 setTimeout 函数将文本提示框和文本都隐藏起来，并将文本的不透明度设置为 0，从而实现淡出效果。

结论

在 HTML 中，在视频上编写文本是一个简单而又有趣的技巧，可以帮助我们更好地传达信息并吸引用户的注意力。无论是使用 <track> 标签编写简单的字幕效果，还是使用 JavaScript 实现更复杂的效果，我们都可以在 HTML 中轻松地实现这一效果。