HTTP Live Streaming: how to listen for timed metadata embedded as ID3 tags using Javascript in iOS8? - Stack Overflow

admin管理员组

文章数量:1277286

We have a video streaming platform where users can broadcast a live video stream and synchronise it with a set of presentation slides. To display the broadcast on iOS we are using HTTP Live Streaming. In order to show the slide at the correct time in the stream on iOS we were listening for the qt_timedmetadataupdated event provided by Apple's Quicktime Javascript API. This method is described here:

.php?355-How-to-debug-timed-data-events-%28ID3-tags%29-from-Apple-HLS-streams-in-iOS-devices

However, in iOS8 this method no longer works so we are trying to find an alternative solution.

Does anyone have an idea as to how we could do this?

The only bit of progress I've managed to make is checking for an "in-band metadata text track" as described here:

I've set up an example test page below using flowplayer and the flashls plugin:

,js,output

In the code I've created an interval that checks every 500ms whether a text track exists whose kind property is metadata. I've noticed that when a bit of timed metadata is injected into the stream then one of these text tracks is created. But the problem is that there is no way for me to access the data that is in the timed metadata which I need to synchronise the (previously mentioned) slides correctly.

Please note that I'm only concerned with live streaming. Playing an existing media file is not a problem.

We have a video streaming platform where users can broadcast a live video stream and synchronise it with a set of presentation slides. To display the broadcast on iOS we are using HTTP Live Streaming. In order to show the slide at the correct time in the stream on iOS we were listening for the qt_timedmetadataupdated event provided by Apple's Quicktime Javascript API. This method is described here:

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

However, in iOS8 this method no longer works so we are trying to find an alternative solution.

Does anyone have an idea as to how we could do this?

The only bit of progress I've managed to make is checking for an "in-band metadata text track" as described here:

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

I've set up an example test page below using flowplayer and the flashls plugin:

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

In the code I've created an interval that checks every 500ms whether a text track exists whose kind property is metadata. I've noticed that when a bit of timed metadata is injected into the stream then one of these text tracks is created. But the problem is that there is no way for me to access the data that is in the timed metadata which I need to synchronise the (previously mentioned) slides correctly.

Please note that I'm only concerned with live streaming. Playing an existing media file is not a problem.

• javascript
• ios8
• http-live-streaming

Share Improve this question Follow asked Apr 21, 2015 at 12:18 Stephen YoungStephen Young 85011 gold badge1111 silver badges2121 bronze badges 1

• stackoverflow./questions/44535465/… Help me Thank you in advanced.... – Divyesh Gondaliya Commented Jun 14, 2017 at 5:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Iron Mike's solution was nearly correct. When a track event es through you have to set its mode property to hidden otherwise the cuechange events won't fire. Here's a full example:

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

I think the text tracks are the way to go. I used qt_timedmetadataupdated before as well and got this working nicely on ios8 like this:

$(videoElement).textTracks.addEventListener('addTrack', function(addTrackEvent) {
  var track = addTrackEvent.track;
  track.addEventListener('cuechange', function(cueChangeEvent) {
    and so on...
  })
})

本文标签：