hls.js has deprecated code usage in chrome

[vegasmurphy]

• 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/dailymotion/hls.js/issues
• The issue occurs in the latest reference client on http://dailymotion.github.io/hls.js/demo and not just on my page.
• Link to playable M3U8 file: http://edge.wholesale-linear-demo.top.comcast.net/out/u/nbcsports_mpx_1.m3u8
• Hls.js version: 0.6.7
• Browser name/version: Chrome 54
• OS name/version: Windows 7/8

Steps to reproduce

1. Allow stream to play naturally
2. Eventually it will throw the following message:
   Setting MediaSource.duration below the highest presentation timestamp of any buffered coded frames is deprecated due to specification change. Support for implicit removal of truncated buffered media will be removed in the future. You should instead perform explicit remove(newDuration, oldDuration) on all sourceBuffers, where newDuration < oldDuration. See https://www.chromestatus.com/features/6107495151960064 for more details.
   Currently this does not affect playback but it will once chrome stops supporting this

It is a hard to reproduce issue, requiring multiple attempts and allowing the media to play for a long duration

Expected behavior

Stream should play correctly without using deprecated code

Actual behavior

Hls.js uses methods that will no longer be available in future versions of chrome

Console output

Setting MediaSource.duration below the highest presentation timestamp of any buffered coded frames is deprecated due to specification change. Support for implicit removal of truncated buffered media will be removed in the future. You should instead perform explicit remove(newDuration, oldDuration) on all sourceBuffers, where newDuration < oldDuration. See https://www.chromestatus.com/features/6107495151960064 for more details.

The error is thrown by the updateMediaElementDuration function in buffer-controller.js line 331:

if (this._levelDuration > this._msDuration) {
logger.log(Updating mediasource duration to ${this._levelDuration});
=> mediaSource.duration = this._levelDuration;
this._msDuration = this._levelDuration;
}

The mediaSource duration is being set to a lower value, which is deprecated.

[romsil]

I was able to reproduce the above issue on http://dailymotion.github.io/hls.js/demo/ with the following environment:

• OS: Windows 7 Enterprise
• Chrome Version: 54.0.2840.71 m
• HLSjs Version: 0.6.7
• m3u8 File: http://edge.wholesale-linear-demo.top.comcast.net/out/u/nbcsports_mpx_1.m3u8

I have attached the console logs:
Deprecated API in Chrome.txt

[mangui]

Hi @vegasmurphy @romsiltp it should be fixed on hls.js/master, plz recheck