Subtitle background with padding.

[huy232]

Hi, is there a way for me to padding my background for the subtitles? I have success in doing it but it has a weird padding when there's no text at all, which is not like what I was expecting.

Here's the link to my CSS: Subtitle with background and padding%3B%0A%09art.subtitle.escape%20%3D%20false%0A%7D)%3B)

Padding still lasts when there's no text:

CSS in case you can't direct the URL:

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    art.subtitle.url = 'https://ccb.megaresources.co/33/5f/335f444d3f2712421782b4bfe8e1b746/eng-2.vtt'
    art.subtitle.style({
        "background-color" : "rgba(0, 0, 0, 0.65)",
        width: "fit-content",
        left: "50%",
        transform: "translateX(-50%)",
        padding: "10px",
        "border-radius": "6px"
    });
    art.subtitle.escape = false
});

[zhw2590582]

https://codesandbox.io/s/eager-glade-5n5r43?file=/src/index.mjs

Or you can try adding styles to the subtitle lines：

.art-subtitle p {
  background: rgb(0 0 0 / 50%);
}

[huy232]

For the subtitles I have, I must add escape HTML for it to work, so it only contains the <div/> that has text inside. It's something like this: <div class="art-subtitle" style="my-style-inside-here;">The escape HTML subtitle inside here, no p tag...</div>

[zhw2590582]

In this case, you need to add your own tags to the subtitle file:

WEBVTT

1
00:00:00.306 --> 00:00:00.844
<p>那一天</p>
<p>あの日</p>

[huy232]

I can't modify the subtitles, I'm receiving them from the source provider of mine. You can see the subtitle itself here: The subtitle

Some of the subtitles will have tag like this: <i>Because the Lawless City...</i> But some just plain text like: Not him, either.

[zhw2590582]

Or you can dynamically modify the subtitle style:

art.on('subtitleUpdate', text => {
  if (text.trim()) {
    art.subtitle.style('background-color', 'rgba(0, 0, 0, 0.65)');
  } else {
    art.subtitle.style('background-color', 'rgba(0, 0, 0, 0)');
  }
})