3.4 Subtitles

• IE: subtitles work in IE9 or below only if they're served from the same domain as the page calling the player. See also the CORS hints in http://demos.flowplayer.org/basics/subtitle.html

• multilanguage subtitles: will probably be supported in Flowplayer 6

• resources about webvtt:

  • http://www.w3.org/TR/ruby/
  • http://dev.w3.org/html5/webvtt/
  • http://edutechwiki.unige.ch/en/WebVTT
  • http://html5doctor.com/video-subtitling-and-webvtt/
  • http://www.delphiki.com/webvtt

• resources for caption creation / conversion

  • https://dcmp.org/ai/ciy/#CiY_resources
  • https://github.com/nwoltman/srt-to-vtt-converter
  • https://atelier.u-sub.net/srt2vtt/ (online converter)
  • http://www.nikse.dk/SubtitleEdit/
  • https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html
  • https://github.com/pkerling/subconv (EIA-608 to WebVTT )

• validators

  • https://quuz.org/webvtt/ (online)
  • https://github.com/annevk/webvtt (source code)

NOTE: THE FP6 subtitle parser expects caption titles/numbers (like the 1, 2 etc in https://flowplayer.org/docs/subtitles.html#vtt-file-format ) to be present. If you experience problems with captions not closing, please implement this custom parser (or add titles):

<script> flowplayer.conf.subtitleParser = function(txt) { var TIMECODE_RE = /^(([0-9]{2}:){1,2}[0-9]{2}[,.][0-9]{3}) --\> (([0-9]{2}:){1,2}[0-9]{2}[,.][0-9]{3})(.*)/; function seconds(timecode) { var els = timecode.split(':'); if (els.length == 2) els.unshift(0); return els[0] * 60 * 60 + els[1] * 60 + parseFloat(els[2].replace(',','.')); } var entries = []; for (var i = 0, lines = txt.split("\n"), len = lines.length, entry = {}, title, timecode, text, cue; i < len; i++) { timecode = TIMECODE_RE.exec(lines[i]); if (timecode) { // title title = lines[i - 1] || (entries.length + 1); // text text = "<p>" + lines[++i] + "</p><br/>"; while (typeof lines[++i] === 'string' && lines[i].trim() && i < lines.length) text += "<p>" + lines[i] + "</p><br/>"; // entry entry = { title: title, startTime: seconds(timecode[1]), endTime: seconds(timecode[3]), text: text }; entries.push(entry); } } return entries; }; </script>