1

Trying to add clickable hyperlinks to html video using the .vtt format.

Here is example captions.vtt file 

    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 ]

and here is my html5 video code

    <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>
user1689784
  • 41
  • 2
  • 3
  • I am trying to add hyperlinked comments that can be clicked by user. My question is: is it possible to do that with .vtt format. – user1689784 Sep 24 '12 at 15:08

2 Answers2

0

It can be done with video-js player. To the video-js css file, or in the html file where your video is, add some styles like...

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

Apply that in your vtt, like this:

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

Did it work? If so, add this to your css:

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

Add that to your vtt like this:

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

Works in Windows Chrome, Firefox, IE10 and above, on Ipad (but not on iphones)

plugincontainer
  • 630
  • 2
  • 9
  • 28
0

This is currently not possible, according to this comment

About links on text in subtitles - this was discussed early on in the definition of WebVTT, but rejected because TV subtitles don't have it. I personally think it's a good idea though, so we should discuss this for the next version of WebVTT.

Dzhuang
  • 1,895
  • 1
  • 14
  • 15