Better subtitle rendering

[dev-AshishRanjan]

Just wanted to ask and suggest about Subtitle rendering in ArtPlayer

I am getting html tags in my subtitles(subtitles are from opensubtitles), subtitles are in srt format When subtitles are rendered, they are being treated as simple text, but can be treated as html. Is there any way to render them as html? My code implementation for subtitles

subtitle: {
        type: "srt",
        encoding: "utf-8",
      },

{
          html: "OpenSubtitle",
          width: 250,
          tooltip: "",
          icon: '<img width="22" heigth="22" src="https://artplayer.org/assets/img/subtitle.svg">',
          selector: [
            {
              html: "Display",
              tooltip: "Show",
              switch: true,
              onSwitch: function (item) {
                item.tooltip = item.switch ? "Hide" : "Show";
                art.subtitle.show = !item.switch;
                return !item.switch;
              },
            },
            ...OnlineSubs,
          ],
          onSelect: function (item) {
            art.subtitle.url = item?.url;
            art.subtitle.type = item?.type;
            art.subtitle.encoding = "utf-8";
            return item?.html;
          },
        },

screenshot

Link to issue

Rive choose any subtitles in OpenSubtiles from players settings

Proposed Solution:

In react

1. Rendered as text

   <p>{data?.overview}</p>

2. Rendered as HTML

   <p dangerouslySetInnerHTML={{ __html: data?.overview }}></p>

If you want to keep the current rendering process, then You can add this as a new option to Artplayer.

const art: any = new Artplayer({
      setting: true,
      fullscreen: true,
      .
      .
      .
      setSubtilesDangerously: true,
      ...
  });

[nabajit-cpu]

We can render subtitles as HTML in ArtPlayer by modifying the subtitle rendering logic to support dangerouslySetInnerHTML. Simply by adding a setSubtitlesDangerously flag to toggle between safe text and HTML rendering for flexibility.

[zhw2590582]

Or you can try the escape:

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