1

尝试使用 .vtt 格式向 html 视频添加可点击的超链接。

这是示例标题.vtt 文件

    WEBVTT

    00:05.100 --> 00:06.000
    [www.stackoverflow.com] // trying to convert this into a clickable link

    00:08.000 --> 00:09.225
    [ Splash...splash...splash splash splash ]

    00:10.525 --> 00:11.255
    [ Splash, Sploosh again ]

这是我的 html5 视频代码

    <video id="example_video_1" class="" controls preload="none" width="640" height="264"
  poster=""
  data-setup="{}">
    <source src="video/video1.mp4" type='video/mp4' />
    <source src="video/video1.webm" type='video/webm' />
    <source src="video/video1.ogv" type='video/ogg' />
    <track kind="captions" src="captions.vtt" srclang="en" label="English" />
    </video>
4

2 回答 2

0

可以使用video-js player来完成。在 video-js css 文件或视频所在的 html 文件中，添加一些样式，例如...

.video-js .vjs-text-track-display p.bigred {color:#f00;font-size: 36px}

将其应用到您的 vtt 中，如下所示：

00:05.100 --> 00:06.000
<p class="bigred">Splash...splash...splash splash splash

它奏效了吗？如果是这样，请将其添加到您的 css 中：

.video-js .vjs-text-track-display a:link {color: #00f}

像这样将它添加到您的 vtt 中：

00:05.100 --> 00:06.000
<a href="http://www.stackoverflow.com">Click here</a>

适用于 Windows Chrome、Firefox、IE10 及更高版本、Ipad（但不适用于 iphone）

于 2015-07-01T16:26:32.713 回答
0

根据此评论，目前这是不可能的

关于字幕中文本的链接——这在 WebVTT 的定义中很早就讨论过，但由于电视字幕没有它而被拒绝。不过我个人认为这是个好主意，所以我们应该在下一个版本的 WebVTT 中讨论这个问题。

于 2019-10-11T03:44:08.053 回答