Safari 上的 Bitmovin 播放器不会从媒体 SourceConfig 加载字幕选择选项
Bitmovin player on Safari does not load captions selection options from media SourceConfig
我在 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 接口并添加了 subType
和 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 中:我得到一个空数组。
我能够联系到 Bitmovin,在与他们讨论后我不得不加载 SubtitleNative 模块 (bitmovinplayer-subtitles-native)。确保在字幕模块 (bitmovinplayer-subtitles)
之后加载它
import BitmovinSubtitlesNativeModule from 'bitmovin-player/modules/bitmovinplayer-subtitles-native';
Player.addModule(BitmovinSubtitlesNativeModule);
当我这样做时,我的旁加载条目由 bitmovin' 加载。但是,在 Safari 上,我添加到 subtitleTracks[] 的自定义 'subType' 和 'sidedloaded' 字段被删除了。 (我们使用这些来帮助我们区分哪些曲目是旁加载的,哪些是播放器从清单中加载的。
我们决定将我们的 subType 和 sidedloaded 值编码到 subtitleTracks 的 label
字段中。现在我们可以在我们的自定义播放器中显示这些旁加载的字幕选项 UI。
现在 Bitmovin 播放器调用我的 onCueEnter/Exit 回调让我渲染字幕文本!
我在 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 接口并添加了 subType
和 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 中:我得到一个空数组。
我能够联系到 Bitmovin,在与他们讨论后我不得不加载 SubtitleNative 模块 (bitmovinplayer-subtitles-native)。确保在字幕模块 (bitmovinplayer-subtitles)
之后加载它import BitmovinSubtitlesNativeModule from 'bitmovin-player/modules/bitmovinplayer-subtitles-native';
Player.addModule(BitmovinSubtitlesNativeModule);
当我这样做时,我的旁加载条目由 bitmovin' 加载。但是,在 Safari 上,我添加到 subtitleTracks[] 的自定义 'subType' 和 'sidedloaded' 字段被删除了。 (我们使用这些来帮助我们区分哪些曲目是旁加载的,哪些是播放器从清单中加载的。
我们决定将我们的 subType 和 sidedloaded 值编码到 subtitleTracks 的 label
字段中。现在我们可以在我们的自定义播放器中显示这些旁加载的字幕选项 UI。
现在 Bitmovin 播放器调用我的 onCueEnter/Exit 回调让我渲染字幕文本!