Wait for all fonts to load

[PaganMuffin]

Hi Is there a possibility to wait for all fonts to load? If I set OnReady option to start playing (eg. video.play()) it start immediately without waiting for fonts or subtitles. I'm using videojs (npm package) and NuxtJS. JavascriptSubtitlesOctopus is added as local_modules Function for initializing player and JavascriptSubtitlesOctopus. source - video, ur - subtitles url, font - array of fonts

player_soft (source, ur, font, av_font) {
      const options_player = {
        sources: source,
        controlBar: {
          children: [
            'playToggle',
            'volumePanel',
            'progressControl',
            'qualitySelector',
            'fullscreenToggle'
          ]
        }
      }
      videojs('video', options_player, function () {
        this.volume(10 / 100)
        const video = this.tech_.el_
        window.SubtitlesOctopusOnLoad = function () {
          const options = {
            video,
            lossyRender: true,
            subUrl: ur,
            fonts: font,
            OnReady: video.play(),
            workerUrl: '/local_modules/octopus/subtitles-octopus-worker.js'
          }
          window.SubtitlesOctopus = new SubtitlesOctopus(options)
        }
        if (SubtitlesOctopus) {
          window.SubtitlesOctopusOnLoad()
        }
      })
    }

[PaganMuffin]

(Previously a method that does not work properly in edited) This work for me now: In subtitles-octopus.js Add global variable after var supportsWebAssembly = false; (eg. var bbbb = 0;) In self.onWorkerMessage in switch statement before default add

case 'font_load': {
  bbbb++
  if(bbbb === self.fonts.length){
    self.video.play()
  }
  break;
}

In subtitles-octopus-worker.js add self.postMessage({target:'font_load'}); after onload(xhr.response); in if (xhr.status == 200 || xhr.status == 0 && xhr.response)

I don't know if this is the best approach to do this. If they is better solution to do it please comment it.

[huanghaiyang]

You can try storing the font files in IndexedDB. When initializing the SubtitlesOctopus instance, retrieve the fonts from IndexedDB and convert them into data URL format to provide to the SubtitlesOctopus instance for configuration. This way, the font files will load quickly. Although you cannot listen for the completion of font loading in SubtitlesOctopus, you can use setTimeout to wait for a while, which should be sufficient.

[huanghaiyang]

Libass supports font files in the blob: format, so you can download the font files first and convert them to the blob: format before initializing the instance object. This eliminates the process of downloading the font files.