发布于 由admin

HTML的“元素：在“/“中实现字幕轨道与元数据

HTML的<track>元素：在<audio>/<video>中实现字幕轨道与元数据

大家好，今天我们来深入探讨HTML5中一个非常重要的元素：<track>。 这个元素主要用于为<audio>和<video>标签提供字幕、描述、章节等时间同步的轨道数据，从而增强多媒体内容的可访问性和用户体验。

<track>元素的作用与类型

<track>元素本身并不渲染任何视觉内容，而是作为一个辅助元素，告诉浏览器如何加载和处理额外的媒体信息。其核心作用是将外部文本文件（通常是WebVTT或SRT格式）与<audio>或<video>元素关联起来。

<track>元素最重要的属性是kind，它定义了轨道数据的类型。常见的kind类型包括：

  • subtitles: 为视频提供字幕。这些字幕通常是对话的文本翻译，方便听力障碍人士或观看者理解外语内容。
  • captions: 为视频提供隐藏字幕。隐藏字幕不仅包含对话的文本，还可能包含对声音效果、音乐或其他重要音效的描述，更全面地服务于听力障碍人士。
  • descriptions: 为视频提供文字描述。这些描述旨在为视觉障碍人士提供视频内容的文字版本，让他们能够理解视频中的场景、动作和人物。
  • chapters: 定义视频的章节。这些章节可以用于创建视频的导航菜单，方便用户快速跳转到感兴趣的部分。
  • metadata: 提供与视频相关的元数据。这些元数据可以是任何与时间相关的信息，例如评论、评分、或者用于交互式应用的数据。

<track>元素的属性详解

除了kind属性，<track>元素还有其他几个重要的属性：

  • src: 指定轨道文件的URL。这个文件通常是WebVTT或SRT格式的文本文件，包含了字幕、描述或其他元数据的内容。
  • srclang: 指定轨道数据的语言。这是一个符合BCP 47标准的语言代码，例如 "en" (英语), "zh" (中文), "fr" (法语) 等。
  • label: 提供轨道的描述性标签。这个标签通常会显示在视频播放器的字幕/音频轨道菜单中，方便用户选择。
  • default: 指定是否默认启用该轨道。如果设置为 "default"，则浏览器会在加载视频时自动启用该轨道。 只能有一个 track 元素设置该属性。
  • id: 提供元素的唯一标识符。
  • crossorigin: 设置跨域资源共享 (CORS) 配置，允许加载来自不同域名的字幕文件。

WebVTT和SRT格式

<track>元素通常与WebVTT (Web Video Text Tracks) 和 SRT (SubRip Subtitle) 格式的文本文件一起使用。

WebVTT 是W3C推荐的标准字幕格式，功能更强大，支持更多的特性，例如样式控制、位置调整和时间戳精度。

SRT 是一种更简单的字幕格式，广泛使用，但功能相对有限。

以下是一个简单的WebVTT示例：

WEBVTT

00:00:00.000 --> 00:00:05.000
Hello, world!

00:00:05.000 --> 00:00:10.000
This is a WebVTT example.

00:00:10.000 --> 00:00:15.000
Enjoy the show!

以下是一个简单的SRT示例：

1
00:00:00,000 --> 00:00:05,000
Hello, world!

2
00:00:05,000 --> 00:00:10,000
This is an SRT example.

3
00:00:10,000 --> 00:00:15,000
Enjoy the show!

使用<track>元素的代码示例

以下是一个使用<track>元素为视频添加字幕的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Video with Subtitles</title>
</head>
<body>

  <video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English" default>
    <track kind="subtitles" src="subtitles_zh.vtt" srclang="zh" label="Chinese">
    Your browser does not support the video tag.
  </video>

</body>
</html>

在这个例子中：

  • <video>元素包含了视频文件 (video.mp4)。
  • 第一个<track>元素指定了英语字幕文件 (subtitles_en.vtt)，语言为英语 (srclang="en"), 标签为 "English"，并且设置为默认启用 (default)。
  • 第二个<track>元素指定了中文字幕文件 (subtitles_zh.vtt)，语言为中文 (srclang="zh"), 标签为 "Chinese"。

浏览器会自动加载并解析这些字幕文件，并在视频播放器的控制面板中显示字幕选项，允许用户选择不同的字幕语言。

使用JavaScript控制<track>元素

可以使用JavaScript来动态控制<track>元素，例如：

  • 动态添加和删除轨道： 可以根据用户的选择或应用程序的逻辑，动态地添加或删除<track>元素。
  • 更改轨道属性： 可以修改<track>元素的属性，例如 src、srclang 和 label，以更改字幕的来源和语言。
  • 监听轨道事件： 可以监听<track>元素上的事件，例如 load 和 error，以处理轨道加载成功或失败的情况。
  • 访问TextTrack对象: 每个<track>元素对应一个 TextTrack 对象，通过它可以访问和操作字幕数据，例如获取当前显示的字幕、修改字幕内容等。

以下是一个使用JavaScript动态控制<track>元素的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Track Example</title>
</head>
<body>

  <video id="myVideo" width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <button onclick="addSubtitle('subtitles_fr.vtt', 'fr', 'French')">Add French Subtitles</button>

  <script>
    function addSubtitle(src, srclang, label) {
      var video = document.getElementById('myVideo');
      var track = document.createElement('track');
      track.kind = 'subtitles';
      track.src = src;
      track.srclang = srclang;
      track.label = label;
      video.appendChild(track);
    }
  </script>

</body>
</html>

在这个例子中：

  • 点击 "Add French Subtitles" 按钮会调用 addSubtitle 函数。
  • addSubtitle 函数会动态创建一个新的<track>元素，设置其属性，然后将其添加到<video>元素中。

TextTrack对象

每个<track>元素都对应一个 TextTrack 对象，可以通过JavaScript访问它。 TextTrack 对象提供了许多有用的属性和方法，用于控制和操作字幕数据。

常用的 TextTrack 属性包括：

  • mode: 指定轨道的显示模式。可能的值包括 "disabled" (禁用), "hidden" (隐藏), 和 "showing" (显示)。
  • kind: 返回轨道的类型 (例如 "subtitles", "captions", "descriptions")。
  • label: 返回轨道的标签。
  • language: 返回轨道的语言代码。
  • cues: 返回一个 TextTrackCueList 对象，包含了轨道中的所有字幕提示 (cues)。
  • activeCues: 返回一个 TextTrackCueList 对象，包含了当前正在显示的字幕提示 (cues)。

常用的 TextTrack 方法包括：

  • addCue(cue): 向轨道添加一个新的字幕提示 (cue)。
  • removeCue(cue): 从轨道中删除一个字幕提示 (cue)。

TextTrackCue对象

TextTrackCue 对象表示一个单独的字幕提示。它包含以下重要的属性：

  • startTime: 字幕提示的开始时间 (以秒为单位)。
  • endTime: 字幕提示的结束时间 (以秒为单位)。
  • text: 字幕提示的文本内容。
  • id: 字幕提示的唯一标识符。

可以使用JavaScript来创建、修改和操作 TextTrackCue 对象。

以下是一个使用JavaScript访问和修改字幕数据的示例：

<!DOCTYPE html>
<html>
<head>
  <title>TextTrack Example</title>
</head>
<body>

  <video id="myVideo" width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <track id="myTrack" kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English" default>
    Your browser does not support the video tag.
  </video>

  <script>
    var video = document.getElementById('myVideo');
    var track = document.getElementById('myTrack').track; // 获取TextTrack对象

    video.addEventListener('loadedmetadata', function() {
      track.mode = 'showing'; // 显示字幕

      // 遍历所有字幕提示
      for (var i = 0; i < track.cues.length; i++) {
        var cue = track.cues[i];
        console.log('Cue ' + i + ': ' + cue.startTime + ' - ' + cue.endTime + ' - ' + cue.text);

        // 修改第一个字幕提示的文本内容
        if (i === 0) {
          cue.text = 'Hello, everyone!';
        }
      }
    });
  </script>

</body>
</html>

在这个例子中：

  • 首先获取<video>元素和<track>元素的引用。
  • 然后，在 loadedmetadata 事件处理程序中，获取 TextTrack 对象。
  • 将 track.mode 设置为 ‘showing’ 以显示字幕。
  • 遍历 track.cues 列表，打印每个字幕提示的信息。
  • 修改第一个字幕提示的 text 属性。

<track>元素在元数据应用中的案例

<track kind="metadata"> 元素可以用于存储和处理与时间相关的元数据。 这为创建交互式视频应用程序打开了新的可能性。

例如，可以创建一个视频播放器，在视频的不同时间点显示相关的信息、链接或其他内容。

以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Metadata Track Example</title>
</head>
<body>

  <video id="myVideo" width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <track id="metadataTrack" kind="metadata" src="metadata.vtt" label="Metadata">
    Your browser does not support the video tag.
  </video>

  <div id="metadataDisplay"></div>

  <script>
    var video = document.getElementById('myVideo');
    var metadataTrack = document.getElementById('metadataTrack').track;
    var metadataDisplay = document.getElementById('metadataDisplay');

    metadataTrack.mode = 'showing'; // 确保metadata track被激活，尽管它不显示任何可视内容

    metadataTrack.addEventListener('cuechange', function() {
        if (this.activeCues && this.activeCues[0]) {
            var cue = this.activeCues[0];
            metadataDisplay.textContent = cue.text; // 显示metadata
        } else {
            metadataDisplay.textContent = ''; // 清空显示
        }
    });
  </script>

</body>
</html>

在这个例子中，metadata.vtt 文件可能包含类似以下的内容：

WEBVTT

00:00:00.000 --> 00:00:05.000
Introduction

00:00:10.000 --> 00:00:15.000
Chapter 1: The Beginning

00:00:20.000 --> 00:00:25.000
Learn more: <a href="https://example.com">Example Website</a>

视频播放器会在视频播放到不同的时间点时，将相应的元数据内容显示在 <div id="metadataDisplay"> 中。 这可以用于创建交互式教程、产品演示或其他类型的视频应用程序。

浏览器兼容性

<track> 元素得到了现代浏览器的广泛支持。然而，为了确保最佳的兼容性，建议使用polyfill库，例如video.js或MediaElement.js，这些库可以为不支持<track>元素的浏览器提供兼容性支持。

无障碍性考虑

使用<track>元素对于提高多媒体内容的无障碍性至关重要。 通过提供字幕、描述和其他元数据，可以确保听力障碍、视觉障碍和其他残疾人士能够访问和理解视频和音频内容。

应该始终为视频和音频内容提供适当的字幕和描述，并确保这些字幕和描述是准确、清晰和易于理解的。 遵循Web内容可访问性指南 (WCAG) 的最佳实践，以确保多媒体内容对所有用户都是可访问的。

总结：<track> 提升多媒体体验

<track>元素是HTML5中一个强大的工具，可以用于为<audio>和<video>元素添加字幕、描述和其他元数据，从而增强多媒体内容的可访问性和用户体验。通过合理地使用<track>元素和相关的JavaScript API，可以创建更具吸引力、更具交互性和更易于访问的多媒体应用程序。

总结：用好<track>让多媒体无障碍

<track>元素是增强Web多媒体可访问性的关键，合理运用可以显著提升用户体验，记住，始终考虑无障碍性，为所有用户提供平等的内容访问机会。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注