Question

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

以下是captions.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>

Answer 1

可以使用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）

Answer 2

根据this comment

，目前无法实现

关于字幕中的文本链接-早在WebVTT的定义中就对此进行了讨论，但由于电视字幕没有它而被拒绝。我个人认为这是个好主意，因此我们应该在下一版WebVTT中进行讨论。

使用.vtt格式添加到html5视频字幕的超链接？

2 个答案: