How to pass Flashls events to MediaElementJS

[rafa8626]

@mangui The AS3 code used in MEJS to use Flashls works fine, but I'd like to pass Flashls events (i.e., ID3_UPDATE) to the JS code so they could be caught. I tried doing something like this:

_hls.addEventListener(HLSEvent.ID3_UPDATED, _ID3Handler);

// later on the code
private function _ID3Handler(event:HLSEvent) : void {
     ExternalInterface.call('(function(){window["__event__' +  _id + '"]("onID3", "' + event.ID3Data + '")})()', null);
}

so that method exists on MEJS, but nothing is happening. Can you provide some guidance on what could I be doing wrong? If you can check this URL I'd appreciate it: https://github.com/mediaelement/mediaelement/compare/flashls-events

Reason why I'm asking this is because somebody brought up to my attention that they want to parse the ID3 tags and right now is possible with Hls.js using Hls.Events.FRAG_PARSING_METADATA, but I think this can be done with Flashls using ID3_UDPATE since IE11 Win7 requires Flash still do play HLS media. But so far I haven't been able to figure out why the event is not being fired.

[mangui]

Hi @rafa8626 nothing special needed for ID3 event, event is handled like the others. you can check the logic in flashls chromeless player: this

Flash event listener JS event listener

are you able to get something from the Flash event listener ? (here)

[rafa8626]

No and actually that's why my question started. I'm executing the demo file I posted on that branch with the file that has that ID3 info and nothing comes up

[rafa8626]

I don't know if I'm missing anything else here

[mangui]

you can check your stream on flashls chromeless demo page http://www.flashls.org/latest/examples/chromeless/ ID3 event should be visible on the metrics canvas.

[rafa8626]

This is what I see on the metrics. I see data on hls.js, but I don't know how to interpret this: http://www.flashls.org/latest/examples/chromeless/metrics.html?data=dXJsfGh0dHA6Ly9kYjIuaW5kZXhjb20uY29tL2J1Y2tldC9yYW0vMDAvMDUvNjRrLzA1Lm0zdTh8ZGF0ZXwyMDE3LTA3LTE2VDAxOjE4OjExLjczNFp8bG9hZHx0eXBlfG1hbmlmZXN0fG5hbWV8bGF0ZW5jeXxkdXJhdGlvbnxid3x0aW1lfGxldmVsfGlkfHN0YXJ0fGVuZHxpZDJ8ZGVtdXh8ZnJhZ21lbnQrbWFpbnxmcmFnbWVudCttYWlufGZyYWdtZW50K21haW58ZnJhZ21lbnQrbWFpbnxmcmFnbWVudCttYWlufGZyYWdtZW50K21haW58ZnJhZ21lbnQrbWFpbnxmcmFnbWVudCttYWlufGJ1ZmZlcnxwb3N8dmlkZW98c2Vla2luZ3xwYXVzZWRfYnVmZmVyaW5nfHBsYXlpbmdfYnVmZmVyaW5nfGxldmVsU3dpdGNofDB8YXVkaW9UcmFja0NoYW5nZXxzZWVrZWR8cGxheWluZ3xwbGF5aW5nK2ZyYWd8MTUxNTlAMHxwbGF5aW5nK2ZyYWd8MTUxNjBAMHxwbGF5aW5nK2ZyYWd8MTUxNjFAMHxwbGF5aW5nK2ZyYWd8MTUxNjJAMHxwbGF5aW5nK2ZyYWd8MTUxNjNAMHxwbGF5aW5nK2ZyYWd8MTUxNjRAMF5FRXwxfDF8MHwzfDB8QlAwfEJQNXxFRXwxfDF8MHwzfDB8QlAzfDJJfDU2fDh8NUV8MVJCfEZXfDB8QlA0fDJQfFN8MXxUfDNZRXxPMXwwfEJQNXwySXxYfDF8WXw0MTh8U0Z8MHxCUDF8QlA2fDJTfDF8MXwwfDdQWHwwfEJQNnw1NnwxfDF8MnwyTlB8N1RNfDB8QlAyfEJQN3wyVXwwfDB8MHxGRk98MHxCUDd8NTR8MkZ8MnwySHwxVFV8RklWfDB8QlAzfEJQOHwyTXwwfDB8MHxONUd8MHxCUDh8NTN8NEt8Mnw0TXwxRkd8TjhPfDB8QlA0fEJQOXwyTHwwfDB8MHxVVjZ8MHxCUDl8Mk98N0N8Mnw3RXwxRUV8VVlJfDB8QlA1fEJQQXwzNXwwfDB8MHwxMktYfDB8QlBBfDUyfDdZfDF8N1p8MTI2fDEyT018STZ8MHxONDN8TzF8N08yfE40M3xRWHw3TUl8TjVOfFhFfE1URnxOQzR8N1hSfEZUNHxVQ0d8ODNTfE5DRnxNVDV8RlBDfEZRVXxVRVB8RlM3fE5EQ3xNUzd8TkZMfEZQWXxVRkx8TklMfE5DOXxNVEF8Vjc4fEZOTnxVSFh8VkExfE5BN3xNVkN8MTMwOHxGSll8VUxLfDEzM0h8TjY0fE1aRnwxM1hLfE1CWnxOVEt8RjR8OTF8RjV8RjZ8RkF8Tk58TzV8TzZ8Tzl8N1BEfDhFVXw3UER8RzQ3fDdQQnxOVEl8N1BCfFZJVHw3UEJ8MTM4NHw3UEReXiQwfDF8MnwzfDR8QCQ1fDZ8N3wtNHw4fDFEfDR8MUV8OXwxRnxBfDFHfEJ8MUhdfCQ1fEN8RHwxSXxFfDFKfEZ8MUt8OHwxTHw0fDFNfDl8MU58QXwxT3xCfDFQXXwkRHwxUXxHfDFSfDh8MVN8NHwxVHxIfDFVfDl8MVZ8QXwxV3xCfDFYfDV8SV18JER8MVl8R3wxWnw4fDIwfDR8MjF8SHwyMnw5fDIzfEF8MjR8QnwyNXw1fEpdfCREfDI2fEd8Mjd8OHwyOHw0fDI5fEh8MkF8OXwyQnxBfDJDfEJ8MkR8NXxLXXwkNXxDfER8MkV8RXwyRnxGfDJHfDh8Mkh8NHwySXw5fDJKfEF8Mkt8QnwyTF18JER8Mk18R3wyTnw4fDJPfDR8MlB8SHwyUXw5fDJSfEF8MlN8QnwyVHw1fExdfCQ1fEN8RHwyVXxFfDJWfEZ8Mld8OHwyWHw0fDJZfDl8Mlp8QXwzMHxCfDMxXXwkRHwzMnxHfDMzfDh8MzR8NHwzNXxIfDM2fDl8Mzd8QXwzOHxCfDM5fDV8TV18JDV8Q3xEfDNBfEV8M0J8RnwzQ3w4fDNEfDR8M0V8OXwzRnxBfDNHfEJ8M0hdfCREfDNJfEd8M0p8OHwzS3w0fDNMfEh8M018OXwzTnxBfDNPfEJ8M1B8NXxOXXwkNXxDfER8M1F8RXwzUnxGfDNTfDh8M1R8NHwzVXw5fDNWfEF8M1d8QnwzWF18JER8M1l8R3wzWnw4fDQwfDR8NDF8SHw0Mnw5fDQzfEF8NDR8Qnw0NXw1fE9dfCQ1fEN8RHw0NnxFfDQ3fEZ8NDh8OHw0OXw0fDRBfDl8NEJ8QXw0Q3xCfDREXXwkRHw0RXxHfDRGfDh8NEd8NHw0SHxIfDRJfDl8NEp8QXw0S3xCfDRMfDV8UF1dfFF8QCRCfDRNfFF8NE58Unw0T118JEJ8NFB8UXw0UXxSfDRSXXwkQnw0U3xRfDRUfFJ8NFVdfCRCfDRWfFF8NFd8Unw0WF18JEJ8NFl8UXw0WnxSfDUwXXwkQnw1MXxRfDUyfFJ8NTNdfCRCfDU0fFF8NTV8Unw1Nl18JEJ8NTd8UXw1OHxSfDU5XXwkQnw1QXxRfDVCfFJ8NUNdfCRCfDVEfFF8NUV8Unw1Rl18JEJ8NUd8UXw1SHxSfDVJXXwkQnw1SnxRfDVLfFJ8NUxdfCRCfDVNfFF8NU58Unw1T118JEJ8NVB8UXw1UXxSfDVSXXwkQnw1U3xRfDVUfFJ8NVVdXXxTfEAkQnw1Vnw1fFR8N3wtNHw5fDVXXXwkQnw1WHw1fFV8N3wtNF18JEJ8NVl8NXxWfDd8LTRdfCRCfDVafDV8V3w3fFhdfCRCfDYwfDV8WXw3fFhdfCRCfDYxfDV8Wnw3fC00XXwkQnw2Mnw1fDEwfDd8LTRdfCRCfDYzfDV8MTF8N3wxMnw5fDY0XXwkQnw2NXw1fDEzfDd8MTR8OXw2Nl18JEJ8Njd8NXwxNXw3fDE2fDl8NjhdfCRCfDY5fDV8MTd8N3wxOHw5fDZBXXwkQnw2Qnw1fDE5fDd8MUF8OXw2Q118JEJ8NkR8NXwxQnw3fDFDfDl8NkVdXV0= As far as I've seen I don't see any ID3 data. Thoughts?

[rafa8626]

This is the hls.js file that shows the data: http://db2.indexcom.com/playertest/mediaelement6/demo/

I don't how to extract that same data with flashls, given that it provides the info about the artist/album/song/etc.

[rafa8626]

Or am I using the wrong event for this scenario?

[mangui]

Hi @rafa8626

i just rechecked the code, and indeed this is not the right event. id3 tags are dispatched along with FRAGMENT_PLAYING event https://github.com/mangui/flashls/blob/c6ddd75afc8a2b2fb841ca8ac49dc6e1239489c0/src/org/mangui/hls/stream/HLSNetStream.as#L115

and expose in HLSPlayMetrics object

[rafa8626]

Thanks for checking this again @mangui I'll follow your recommendation and let you know the final result

[rafa8626]

Yes you are right that's the event I was looking for; I guess my last question is how can I pass the whole object through Externalinterface.call method, given that only is letting me process strings?

[mangui]

well, Flash should JSONify HLSPlayMetrics object ? at least the demo page is able to access inner fields of HLSPlayMetrics see https://github.com/mangui/flashls/blob/dev/examples/chromeless/index.html#L531 then I would guess id3 tags array should also be JSONified ? if not you might need to pass it as a string and deserialize it in JS.

[rafa8626]

Thanks @mangui for your help. I was able to get the string decoded with JSON. Now I can pass the rest of the events properly.