如何让ChaptersButton出现在Videojs-Player中

Question

我想使用 videojs（8.10.0 版）并为观众提供选择章节的方法。我理解官方文档的方式是，只需包含一个链接到视频元素中的 VTT 文件的轨道元素就足够了，这样章节按钮就会出现。（1. source 的有关轨道元素的信息；2.章节按钮的来源 )

到目前为止，我无法仅通过包含 track-element 来使章节按钮出现。这是正确的方法还是我必须手动在 js-sript 中添加章节按钮？

HTML 文件：

<head>
  <title>Test</title>
  <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
  </head>

  <body>
 <video
      id="my-video"
      class="video-js"
      controls
      preload="auto"
      width="640"
      height="264"
      poster=""
      data-setup="{}"
    >
      <source src="example.mp4" type="video/mp4" />
      <track kind="chapters" src="kapitelNeu.vtt" srclang="de" label="Kapitel" default>

      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank"
          >supports HTML5 video</a>
      </p>
    </video>
    <script src="https://vjs.zencdn.net/8.10.0/video.js"></script>
  </body>
  </html>

VTT 文件

WEBVTT


Kapitel 1
00:00:00.000 --> 00:00:04.000
Test 1

Kapitel 2
00:00:05.000 --> 00:00:09.000
Test 2

Answer 1

@misterben：你完全正确，非常感谢😊。

开发工具显示是CORS问题，导致vtt文件（本地存储）无法使用。在给定的条件下，我决定将 WEBVTT 代码直接放入 track-element 的 src-attribute 中，这样它就可以工作了。我知道，这不是一个漂亮的解决方案，但是 - 至少目前 - 这对我来说很好。

如何让ChaptersButton出现在Videojs-Player中

问题描述投票：0回答：1

1个回答

最新问题

如何让ChaptersButton出现在Videojs-Player中

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1