How to get the webvtt file url?

690 views
Skip to first unread message

Yair Ans

unread,
Jul 25, 2016, 5:13:47 AM7/25/16
to Shaka Player Users
Hi,

In our player we want to allow the user to customise the captions (font size color etc.),
For that we should handle the Webvtt files ourself instead of letting Shaka to handle them.
Is there a way to get the Webvtt files urls which described in the manifest? 

Thanks,
Yair

Joey Parrish

unread,
Jul 25, 2016, 12:46:08 PM7/25/16
to Yair Ans, Shaka Player Users
Hi Yair,

Shaka only parses the cues and feeds them to the browser.  We don't do any DOM manipulation to show the cues, nor any styling of them.

Instead of handling WebVTT yourself, I would recommend you use CSS to style the cues.  For example:


::cue { color: red; font-size: 25pt; }


You can set these styles programmatically based on your user's settings:


  // Find or create a style element
  var element = document.getElementById(STYLE_ELEMENT_ID);
  if (!element) {
    element = document.createElement('style');
    element.id = STYLE_ELEMENT_ID;
    document.head.appendChild(element);
  }
  var sheet = element.sheet;

  // Clear previous rules
  while (sheet.cssRules.length) {
    sheet.deleteRule(0);
  }

  // Insert new rules
  sheet.insertRule('::cue { ' + STYLE_RULES + ' }', 0);


Does this help?
-Joey


--
You received this message because you are subscribed to the Google Groups "Shaka Player Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shaka-player-us...@googlegroups.com.
To post to this group, send email to shaka-pla...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shaka-player-users/429d0a78-4d80-43c4-b9b8-98d48257f0c2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Yair Ans

unread,
Jul 26, 2016, 4:58:55 AM7/26/16
to Shaka Player Users
HI Joey,

Thanks for your quick and detailed response. I didn't now the ::cue rule so thanks for that. 

However, we have already an entire webvtt solution we handle ourself for vtt files which not included in the manifest,
So, we prefer to use the same for the included files.

It will be great if Shaka will expose the webvtt files urls, and w'll fetch and handle them.

Thanks and have a nice day,
Yair

  

Joey Parrish

unread,
Jul 26, 2016, 12:37:21 PM7/26/16
to Yair Ans, Shaka Player Users
Hi Yair,

It seems like you're asking for the URLs of VTT files from the manifest, but you also said you handle VTT files which are not in the manifest.  Can you please clarify?  I want to make sure I understand what you need so I can recommend a solution which fits our architecture.

Thanks,
Joey


--
You received this message because you are subscribed to the Google Groups "Shaka Player Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shaka-player-us...@googlegroups.com.
To post to this group, send email to shaka-pla...@googlegroups.com.
Message has been deleted

Yair Ans

unread,
Jul 27, 2016, 3:48:12 AM7/27/16
to Shaka Player Users
Hi Joey,

Sorry for the confusion, I will try to clarify,

In our player we support 2 options to provide vtt files:
   1. Providing explicity a URL to vtt file.
   2. Providing mpd file refers to vtt file, like: 
                   <AdaptationSet id="21" contentType="text" lang="he">
                      <Representation id="21" bandwidth="256" mimeType="text/vtt">
                         <BaseURL>s-eng.webvtt</BaseURL>
                      </Representation>
                   </AdaptationSet>

In #1 we fetch the file parse it (using vtt.js open source) and display the cues.
In #2 when we using Shaka we can't fetch the vtt file since we don't know its URL.

We would like to handle the #2 same we have handled the #1, i.e fetch the file parse it and display the cues ourself.

For that we ask Shaka to expose the vtt URLs which are referred by the mpd file.

Thanks,
Yair  

Joey Parrish

unread,
Jul 27, 2016, 12:41:37 PM7/27/16
to Yair Ans, Shaka Player Users
Hi Yair,

Have you considered letting Shaka handle both #1 and #2?  We provide player.addTextTrack() for #1, so that both external and manifest-provided text tracks can be displayed through the same mechanism (the browser's built-in cue interface).  With that and CSS to style the cues, you should have everything you need.

Thanks,
Joey


--
You received this message because you are subscribed to the Google Groups "Shaka Player Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shaka-player-us...@googlegroups.com.
To post to this group, send email to shaka-pla...@googlegroups.com.

Yair Ans

unread,
Jul 28, 2016, 3:56:21 AM7/28/16
to Shaka Player Users, yai...@gmail.com
Hi Joey,

Our player also supports non-dash contents without Shaka. 
For part of those we have to handle webvtt ourself anyhow.
So, we prefer to concentrate the webvtt handling in one solution.

Thanks,
Yair  
  

 

Joey Parrish

unread,
Jul 29, 2016, 2:42:17 PM7/29/16
to Yair Ans, Shaka Player Users
Hi Yair,

Here's how Shaka's text support works:

We have a series of plugins in the source that provide support for text.  A plugin registers itself with TextEngine and is invoked by TextEngine to parse the text stream.  Registration is based on MIME type.  Each time the plugin is called, TextEngine feeds it a segment or complete text file and the plugin returns an array of the parsed cues.  TextEngine then feeds those cues into the browser.

There's nothing in our design that offers a natural point to pass you the WebVTT URLs.  In fact, in the general case, there may be many over time (due to segmented text), we may not know their URLs upfront (due to SegmentURL or SegmentTimeline in the manifest), or there may even "infinitely" many over time (due to live streams).

However, you may be able to get what you want by simply registering your own WebVTT parser with TextEngine.  I see from vtt.js's website that the entry API is very similar to our own parser plugin API.  So it would seem you could simply write a text plugin that passes our data on to your parser, and then just return an empty array.  StreamingEngine and TextEngine will be perfectly happy with this, and you can handle WebVTT the way you want to.

Here's what that might look like:

ExternalVttTextParser = function(data, segmentStartTime, segmentEndTime) {
  var parser = new WebVTT.Parser(window);
  // ...
  parser.parse(data);
  parser.flush();
  return [];
};
shaka.media.TextEngine.registerParser('text/vtt', ExternalVttTextParser);

The registration of your parser will replace our default parser for WebVTT.  You can also choose to customize the build to remove our parser and/or add yours at compile time.

Does this help?
-Joey


--
You received this message because you are subscribed to the Google Groups "Shaka Player Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shaka-player-us...@googlegroups.com.
To post to this group, send email to shaka-pla...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages