html video 增加字幕文件 track

LRF200307

已于 2024-08-27 14:15:12 修改

阅读量572

点赞数 4

文章标签： html javascript 前端

于 2024-08-22 16:32:01 首次发布

本文链接：https://blog.csdn.net/LRF200307/article/details/141431551

版权

这是最近再使用 video 时想看下字幕功能发现的。他需要在 video 标签下添加 track 标签，需要引入一个 vtt 文件

代码

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /** 字幕样式 */
      ::cue {
        background: none;
        color: #fff;
        text-shadow: 0 1px #000, 1px 0 #000, -1px 0 #000, 0 -1px #000;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <video
      id="video"
      controls
      style="width: 500px"
      ref="videoRef"
      crossorigin="anonymous"
    >
      <source
        src="https://prod-streaming-video-msn-com.akamaized.net/a8c412fa-f696-4ff2-9c76-e8ed9cdffe0f/604a87fc-e7bc-463e-8d56-cde7e661d690.mp4"
        type="video/mp4"
      />

      <track
        default
        src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt"
        label="中文字幕"
        crossorigin="anonymous"
        kind="captions"
      />
    </video>
  </body>
</html>

vtt

WEBVTT

00:00:00.000 --> 00:00:00.999  line:80%
Hildy!

00:00:01.000 --> 00:00:01.499 line:80%
How are you?

00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the <u>lord of the universe</u> in?

00:00:03.000 --> 00:00:04.299 line:80%
Yes, he's in - in a bad humor

00:00:04.300 --> 00:00:06.000 line:80%
Somebody must've stolen the crown jewels

在字幕中可以使用 <u></u> 和 <i></i> 等标签，u 标签是下划线，i 为倾斜

在时间后面的 line 为屏幕位置，0-100，从上到下，单位为百分号。

快去试试吧

vtt 文件也有很多参数可以调，具体可以看下面这篇文章。

Web 视频文本轨格式（WebVTT） - Web API | MDN (mozilla.org)