weizhenye / ASS

A lightweight JavaScript ASS subtitle renderer
https://ass.js.org
MIT License
535 stars 79 forks source link

some video players change the width/height after new ASS(...) #45

Closed orelHAnyvision closed 5 months ago

orelHAnyvision commented 7 months ago

Hi my app is running with vite and react after loading the video its width/height changes only for external video platers like Plyr, ReactPlayer and so, for native video player it does work properly. is there something I miss?

import Plyr from 'plyr-react'
...

 const handleLoad = () => {
    const videoElement = document.querySelector('video') 
    fetch(subs)
      .then((res) => res.text())
      .then((text) => {
        const ass = new ASS(
          text,
          videoElement
        )
      })
  }

...
return (
   <Plyr
                width={600}
                height={300}
                onLoadedData={handleLoad}
                source={{
                  type: 'video',
                  sources: [{ src: file }],
                }}
              />
)
weizhenye commented 5 months ago

If you don't provide container when initializing, ASS.js will create a container, and move the video to the container, it might be break player libs.

I suggest you to provide container and set styles yourself to make sure subtitles display in video's viewport.

new ASS(content, video, { container: document.querySelector('.my-container') });