Empty metadata textTrack added regardless of in-band data

[wallg]

Environment

• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream
• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the latest reference client on http://video-dev.github.io/hls.js/demo and not just on my page

• Link to playable M3U8 file: https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8
• Hls.js version: 0.8.1
• Browser name/version: Chrome 60, Firefox 55, others unconfirmed
• OS name/version: Mac OS 10.11.6

Steps to reproduce

1. Load the demo page https://video-dev.github.io/hls.js/demo/
2. Open console, to inspect video element
   var p = document.getElementsByTagName('video')[0];
p.textTracks[0]
3. Observe a metadata text track.

Expected behavior

textTracks.length === 0

Actual behavior

trxtTracks 'addtrack' event is fired
textTracks.length === 1

I was unable to find reasoning for this track being added, and I believe it is being added here:

hls.js/src/controller/id3-track-controller.js

Line 31 in 193ee2e

this.id3Track = this.media.addTextTrack('metadata', 'id3');

I'm not sure why, but in browsers that support native playback of hls, the 'addtrack' event is not fired and the metadata track is not added to the array of textTracks.

[wallg]

I have also noticed that calling Hls.destroy() does not remove this text tracks (since there is currently no way to do this in the media element spec). This seems like a good reason not to add this track to the element.

[mangui]

indeed this textTrack needs to be created dynamically on first id3 frame found. attached commit should address that.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.