Using TwTube plugin with VTT subtitles from internal tiddlers

56 views
Skip to first unread message

Creativitate Inginerească

unread,
Aug 24, 2019, 2:30:50 PM8/24/19
to TiddlyWiki
Hello everybody!

I am using TiddlyWiki 5.1.20 with the TwTube 1.0.9 plugin (based on VideoJS version 6.7.3) to showcase some videos and their subtitles in various languages for a trade-free project.

As I am working on the implementation of a website at https://alexio.sisko.webdock.io/TROM/TROMsite.html and I noticed that it works with the VTT subtitles for 3 languages hosted on the same domain (for the first video):

<$videojs controls="controls" aspectratio="16:9" preload="auto" fluid="fluid" class="vjs-big-play-centered" autoplay="true" loop="true">
  <source src="https://archive.org/download/TROMsiteTrailer/00.%20TROMsite%20trailer.mp4" type="video/mp4"/>
  <source src="https://archive.org/download/TROMsiteTrailer/00.%20TROMsite%20trailer.webm" type="video/webm"/>
  <source src="https://archive.org/download/TROMsiteTrailer/00.%20TROMsite%20trailer.ogv" type="video/ogv"/>
  <track kind="captions" src="./subtitles/trailer/TROM%20Project%20Trailer.en.vtt" srclang="en" label="English" default />
  <track kind="captions" src="./subtitles/trailer/TROM%20Project%20Trailer.de.vtt" srclang="de" label="Deutsch" />
  <track kind="captions" src="./subtitles/trailer/TROM%20Project%20Trailer.ro.vtt" srclang="ro" label="Română" />
</$videojs>

To make the TW fully portable, when it is downloaded on a local computer, I would like very much to use the WebVTT subtitles stored inside TW as tiddlers (with the type "text/vtt") and I am trying this:

<$videojs controls="controls" aspectratio="16:9" preload="auto" fluid="fluid" class="vjs-big-play-centered" autoplay="true" loop="true">
  <source src="https://archive.org/download/TROMsiteTrailer/00.%20TROMsite%20trailer.mp4" type="video/mp4"/>
  <source src="https://archive.org/download/TROMsiteTrailer/00.%20TROMsite%20trailer.webm" type="video/webm"/>
  <source src="https://archive.org/download/TROMsiteTrailer/00.%20TROMsite%20trailer.ogv" type="video/ogv"/>
  <track kind="captions" src="<$tiddler tiddler=[[sub/TROM%20Project%20Trailer.en.vtt]]>" srclang="en" label="English" default />
  <track kind="captions" src="<$tiddler tiddler=[[sub/TROM%20Project%20Trailer.de.vtt]]>" srclang="de" label="Deutsch" />
  <track kind="captions" src="<$tiddler tiddler=[[sub/TROM%20Project%20Trailer.ro.vtt]]>" srclang="ro" label="Română" />
</$videojs>

How can I get these internal tiddlers work with the VideoJS code?

Thank you very muck for your feedback!

Alexio
Reply all
Reply to author
Forward
0 new messages