HTTP Live Streaming:如何在iOS8中使用Javascript监听作为ID3标签嵌入的定时元数据？

Question

我们有一个视频流平台,用户可以在其中播放实时视频流并将其与一组演示幻灯片同步.要在iOS上显示广播,我们使用的是HTTP直播.为了在iOS上的流中正确显示幻灯片,我们正在收听qt_timedmetadataupdatedApple的Quicktime Javascript API提供的活动.这个方法在这里描述:

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插件在下面设置了一个示例测试页面:

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

在代码中,我创建了一个间隔,每隔500ms检查一个文本轨道是否存在其kind属性metadata.我注意到当向流中注入一些定时元数据时,会创建其中一个文本轨道.但问题是我无法访问定时元数据中的数据,我需要正确地同步(前面提到的)幻灯片.

请注意,我只关注直播.播放现有媒体文件不是问题.

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
  });
});