javascript - HTTP 直播 : how to listen for timed metadata embedded as ID3 tags using Javascript in iOS8?

Question

我们有一个视频流平台，用户可以在其中播放实时视频流并将其与一组演示幻灯片同步。为了在 iOS 上显示广播，我们使用 HTTP Live Streaming。为了在 iOS 上的流中的正确时间显示幻灯片，我们监听了 Apple 的 Quicktime Javascript API 提供的 qt_timedmetadataupdated 事件。此处描述了此方法:

http://www.wowza.com/forums/content.php?355-How-to-debug-timed-data-events-%28ID3-tags%29-from-Apple-HLS-streams-in-iOS-devices

但是，在 iOS8 中，此方法不再有效，因此我们正在尝试寻找替代解决方案。

有没有人知道我们如何做到这一点？

我唯一取得的进展是检查“带内元数据文本轨道”，如下所述:

https://github.com/videojs/videojs-contrib-hls#in-band-metadata

我在下面使用 flowplayer 和 flashls plugin 设置了一个示例测试页面:

http://jsbin.com/vohicoxegi/1/edit?html,js,output

在代码中，我创建了一个间隔，每 500 毫秒检查一次是否存在 kind 属性为 metadata 的文本轨道。我注意到，当一些定时元数据被注入(inject)到流中时，就会创建这些文本轨道之一。但问题是我无法访问定时元数据中的数据，我需要正确同步(前面提到的)幻灯片。

请注意，我只关心直播。播放现有的媒体文件不是问题。

Answer 1

Iron Mike 的解决方案几乎是正确的。当跟踪事件通过时，您必须将其 mode 属性设置为 hidden，否则 cuechange 事件将不会触发。这是一个完整的例子:

$(videoElement)[0].textTracks.addEventListener('addtrack', function(addTrackEvent) {
  var track = addTrackEvent.track;
  track.mode = 'hidden';

  track.addEventListener('cuechange', function(cueChangeEvent) {
    // do what you want with the cueChangeEvent
  });
});