Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wait for all fonts to load #69

Open
PaganMuffin opened this issue Apr 30, 2020 · 3 comments
Open

Wait for all fonts to load #69

PaganMuffin opened this issue Apr 30, 2020 · 3 comments
Labels

Comments

@PaganMuffin
Copy link

PaganMuffin commented Apr 30, 2020

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
Copy link
Author

PaganMuffin commented May 2, 2020

(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
Copy link

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
Copy link

huanghaiyang commented Jan 3, 2024

image
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.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants