0

我在 Angular 应用程序中使用 Bitmovin 播放器（v8.15）。我已经将播放器配置如下并定义了回调

this._player = new Player(this.videoPlayer.nativeElement, {
  ...bitmovinConfig,
  events: {
    // other code removed

    [SubtitleAdded]: () => this.triggerCaptionChange(),

    // other code removed
  },
});

triggerCaptionChange() {
  const captions = this._player.subtitles.list() as MediaCaption[];
  console.log(captions);
  // other code removed
}

Chrome 中的 MediaCaption 看起来像这样（我们基本上扩展了 bitmovin 的 SubtitleTrack 接口并添加了subTypeand sideloaded：

"id": "1",
"url": "https://...myurl_hidden.../DASH/5b95ba67-75bc-4127-bcaa-182a819f649c_WebVTT_eng.vtt",
"kind": "caption",
"lang": "en-US",
"subType": "subtitles",
"sideloaded": true,
"label": "English",
"enabled": true

我们还使用如下配置加载播放器：

async onSourceChange(_: SourceConfig, current: SourceConfig) {  
  await this._player.load(current); 
  this.triggerAudioChange();
  this.triggerCaptionChange(); 

  ...
}

在 Chrome 中current看起来像这样：

"hls": "https://...urlhidden.../spmx/.../.../Dash/DASH_pertitle-dash.mpd",
"dash": "https://...urlhidden.../spmx/.../...Dash/DASH_pertitle-dash.mpd",
"drm": hidden,

"subtitleTracks": [
    {
      "enabled": "false",
      "id": "1",
      "url": "https://...urlhidden.../spmx/.../.../Dash/Subtitles_es_419.vtt",
      "kind": "caption",
      "label": "es-419",
      "lang": "es-419",
      "subType": "Subtitles",
      "sideloaded": true
    },
    {
      "enabled": "false",
      "id": "3",
      "url": "https://...urlhidden.../spmx/.../.../Dash/Captions_en_US.vtt",
      "kind": "caption",
      "label": "es-US",
      "lang": "en-US",
      "subType": "Captions",
      "sideloaded": true
    }
  ],
  "options": {
    "startTime": 1709
  }

在 Safari 中current看起来像这样（注意，没有dash键）：

"hls": "https://...urlhidden.../spmx/.../.../Apple/HLS_main.m3u8",
"drm": hidden,
"subtitleTracks": [
    {
      "enabled": "false",
      "id": "1",
      "url": "https://...urlhidden.../spmx/.../.../Apple/Subtitles_es-419.m3u8",
      "kind": "caption",
      "lang": "es-419",
      "lang": "es-419",
      "subType": "SUBTITLES",
      "sideloaded": true
    },
    {
      "enabled": "false",
      "id": "2",
      "url": "https://...urlhidden.../spmx/.../.../Apple/Subtitles_es_419.vtt",
      "kind": "caption",
      "lang": "es-419",
      "lang": "es-419",
      "subType": "Subtitles",
      "sideloaded": true
    },
    {
      "enabled": "false",
      "id": "4",
      "url": "https://...urlhidden.../spmx/.../.../Apple/Captions_en-US.m3u8",
      "kind": "caption",
      "lang": "en-US",
      "lang": "en-US",
      "subType": "SUBTITLES",
      "sideloaded": true
    }
    {
      "enabled": "false",
      "id": "5",
      "url": "https://...urlhidden.../spmx/.../.../Apple/Captions_en_US.vtt",
      "kind": "caption",
      "lang": "en-US",
      "lang": "en-US",
      "subType": "Captions",
      "sideloaded": true
    }
  ],
  "options": {
    "startTime": 1709
  }

在 Chrome 中：控制台日志给了我一个包含两个项目的数组。

在 Safari 中：我得到一个空数组。

4

1 回答 1

1

我能够联系 Bitmovin，在与他们讨论后，我不得不加载 SubtitleNative 模块（bitmovinplayer-subtitles-native）。确保在字幕模块 (bitmovinplayer-subtitles) 之后加载它

import BitmovinSubtitlesNativeModule from 'bitmovin-player/modules/bitmovinplayer-subtitles-native';
Player.addModule(BitmovinSubtitlesNativeModule);

当我这样做时，我的侧载条目由 bitmovin' 加载。但是，在 Safari 上，我添加到 subtitleTracks[] 中的自定义“subType”和“sideloaded”字段被剥离。（我们使用这些来帮助我们区分哪些曲目是旁加载的，哪些是播放器从清单中加载的。

我们决定将 subType 和 sideloaded 值编码到labelsubtitleTracks 字段中。现在我们可以在自定义播放器 UI 中显示这些侧载字幕选项。

现在 Bitmovin 播放器调用我的 onCueEnter/Exit 回调来渲染字幕文本！

于 2020-01-17T23:30:48.933 回答