Add subtitles

[kuipumu]

How can I implement
subtitles to the player, I have seen the video player with subtitles example but id like to add the subtitles directly from a srt file without this process. I don't have to much knowledge related to js. Thanks.

[DiegoRBaquero]

Are you talking about webtorrent in the browser? the desktop app? the CLI?

[kuipumu]

About webtorrent in the browser. Im currently using the basic script that shows in the webttorrent website with the min js.

`<script>

  var torrentId = 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent'

  var client = new WebTorrent()

  // HTML elements
  var $body = document.body
  var $progressBar = document.querySelector('#progressBar')
  var $numPeers = document.querySelector('#numPeers')
  var $downloaded = document.querySelector('#downloaded')
  var $total = document.querySelector('#total')
  var $remaining = document.querySelector('#remaining')
  var $uploadSpeed = document.querySelector('#uploadSpeed')
  var $downloadSpeed = document.querySelector('#downloadSpeed')

  // Download the torrent
  client.add(torrentId, function (torrent) {

    // Torrents can contain many files. Let's use the .mp4 file
    var file = torrent.files.find(function (file) {
      return file.name.endsWith('.mp4')
    })

    // Stream the file in the browser
    file.appendTo('#output')

    // Trigger statistics refresh
    torrent.on('done', onDone)
    setInterval(onProgress, 500)
    onProgress()

    // Statistics
    function onProgress () {
      // Peers
      $numPeers.innerHTML = torrent.numPeers + (torrent.numPeers === 1 ? ' par' : ' pares')

      // Progress
      var percent = Math.round(torrent.progress * 100 * 100) / 100
      $progressBar.style.width = percent + '%'
      $downloaded.innerHTML = prettyBytes(torrent.downloaded)
      $total.innerHTML = prettyBytes(torrent.length)

      // Remaining time
      var remaining
      if (torrent.done) {
        remaining = '¡Descarga Completada!.'
      } else {
        remaining = moment.duration(torrent.timeRemaining / 1000, 'seconds').humanize()
        remaining = remaining[0].toUpperCase() + remaining.substring(1) + ' remaining.'
      }
      $remaining.innerHTML = remaining

      // Speed rates
      $downloadSpeed.innerHTML = prettyBytes(torrent.downloadSpeed) + '/s'
      $uploadSpeed.innerHTML = prettyBytes(torrent.uploadSpeed) + '/s'
    }
    function onDone () {
      $body.className += ' is-seed'
      onProgress()
    }
  })

  // Human readable bytes util
  function prettyBytes(num) {
    var exponent, unit, neg = num < 0, units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
    if (neg) num = -num
    if (num < 1) return (neg ? '-' : '') + num + ' B'
    exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1)
    num = Number((num / Math.pow(1000, exponent)).toFixed(2))
    unit = units[exponent]
    return (neg ? '-' : '') + num + ' ' + unit
  }
</script>`

It works prefectly but, I can't seem to find to get subtitles work.
Also I have tried with several torrents appart from the Sintel default one, but none of them seems to work, I can't get any other magnet link to load, ¿does this have to be something related with a WebRTC limitation?. Thanks.

[andreapaiola]

I don't understand what kind of subtitles are you using and how do you want to load it... please insert more info...

[kuipumu]

Let me explain, I inserted the script in one of my post In my static website, that is deployed using Hugo, now, Id like to add certain videos, of movies, documentaries that I have from certain groups that I have uploaded to a torrent in my normal Qbittorrent client. Now, I see that the system you have created has the ability to load subtitles trough uploading a compressed file, but I see that mechanism some complicated for certain people who would see this video on my post, so why I tried to do was to load the srt file from a folder in my website called subtitles, but I don't understand how to implement this trough the script you created (that is an excellent implementation btw) .¿Is this possible?, I mean, if the srt could be loaded from outside, then it could also be loaded from the inside folder of the website.

Another doubt is that, some of this torrents won't load, I supposed it was because the low numbers of peers, so i tried to load some other tor from any tracker in the web, some torrent of this movie torrents that have lots of peers, but it did not load, I saw that when I loaded it in the desktop version worked, but not on the browser version, ¿this is a limitation of the browser client or just a bad configuration i made on the script?. Thanks, I really appreciate your help, I am newbie in js.

[DiegoRBaquero]

You can append the srt file to the video tag (?).

Second: https://github.com/webtorrent/webtorrent/blob/master/docs/faq.md#why-does-browser-downloading-not-work-i-see-no-peers

[andreapaiola]

1. load the .srt file content
2. convert the srt multiline text to WebVTT
3. add to the video tracks

done :)

you can convert to WebVTT here, I think

[kuipumu]

@DiegoRBaquero ¡Thanks!, I did not read that.

@andreapaiola ¿And how I load to the video tracks?, I see from the basic script that this var loads the .mp4 from the torrent.

var file = torrent.files.find(function (file) {
return file.name.endsWith('.mp4')
})

¿But for the WebVTT how do I do?.

Thanks, very grateful from your help.

[andreapaiola]

Use the .srt file to generate the WebVTT. Search it online.

In my script it's loaded in the zip file, but in your case you don't need this... as far as I can understand.

[brusacco]

https://iandevlin.com/blog/2015/02/javascript/dynamically-adding-text-tracks-to-html5-video/