实例事件 subtitleSwitch 的URL是一个blob: ，导致ASS字幕切换后只有文字

[chivehao]

问题

实例事件 subtitleSwitch 的URL是一个blob:，导致ASS字幕切换后只有文字，没法正常加载ASS的字体样式。

建议

事件的参数 url 返回原始的字符串，后面加上个比如 blob 参数返回一个blob: 开头的字符串

背景

在尝试播放器的ass字幕加载（demo-artplayer）， 按照了这个方法，设置了原始的URL，和加载了对应的字体文件后，ASS字幕正常显示，但是在尝试切换的时候，出现了如上问题。

截图

正常加载了ASS字幕：

切换成繁体中文： 这里是通过 instance.setSubUrl(url);设置ASS字幕，URL是上面那个 blob 开头的 很明显，原来的字幕还在，新的字幕可能是因为是设置了blob开头的URL，只有字显示出来的。

在切换成简体中文：

而且切换按钮那里的显示和隐藏操作，无法对原来的字幕进行操作。

[chivehao]

可能是我不太会用，先关了。

[zhw2590582]

这么容易就放弃吗？？

因为字幕已经由SubtitlesOctopus接管了，这个时候就不要使用artplayer自带的字幕功能，这样就会显示两个重叠的字幕

这段删掉：

    art.on("subtitleSwitch", (url: any) => {
      console.info("subtitleSwitch", url);
      instance.setSubUrl(url);
      console.info("instance", instance);
      console.info("instance subUrl", instance.subUrl);
    });

把这段：

        onSelect: function (item) {
          art.value!.subtitle.switch(item.url, {
            name: item.html,
          });
          return item.html;
        },

改成：

        onSelect: function (item) {
          art.value!.plugins.artplayerPluginAss.instance.setSubUrl(item.url)
          return item.html;
        },

显示和隐藏不生效，也是因为这个字幕层并不是属于artplayer的，但你可以用js操作它：

art.value!.plugins.artplayerPluginAss.instance.canvas

[chivehao]

这么容易就放弃吗？？

因为字幕已经由SubtitlesOctopus接管了，这个时候就不要使用artplayer自带的字幕功能，这样就会显示两个重叠的字幕

这段删掉：

    art.on("subtitleSwitch", (url: any) => {
      console.info("subtitleSwitch", url);
      instance.setSubUrl(url);
      console.info("instance", instance);
      console.info("instance subUrl", instance.subUrl);
    });

把这段：

        onSelect: function (item) {
          art.value!.subtitle.switch(item.url, {
            name: item.html,
          });
          return item.html;
        },

改成：

        onSelect: function (item) {
          art.value!.plugins.artplayerPluginAss.instance.setSubUrl(item.url)
          return item.html;
        },

显示和隐藏不生效，也是因为这个字幕层并不是属于artplayer的，但你可以用js操作它：

art.value!.plugins.artplayerPluginAss.instance.canvas

感谢您的回答 还没放弃，目前还在尝试，我尝试下您给的思路，JS这块不是很懂，确实是有点懵。

[chivehao]

成功了，感谢

直接通过 setSubUrl没用，我直接销毁了，重新new了一个。

        onSelect: function (item) {
          subtitleOctopus.value.setSubUrl(item.url);
          const newSubtitleUrl = item.url;
          subtitleOctopus.value.dispose();
          subtitleOctopus.value = new SubtitlesOctopus({
            fonts: fonts,
            subUrl: newSubtitleUrl,
            workerUrl: `/src/assets/js/JavascriptSubtitlesOctopus/subtitles-octopus-worker.js`,
            video: art.value?.template.$video,
          });
          subtitleOctopus.value.canvasParent.style.zIndex = 20;
          return item.html;
        },

[chivehao]

我找到了官方的仓库：https://github.com/libass/JavascriptSubtitlesOctopus

setTrackByUrl(url): works the same as the subUrl option. It will set the subtitle to display by its URL.

切换更方便的办法QAQ