Append video data at end of buffer in HTML mode for IE11 for safe quality switch

[mjneil]

Description

Some browsers (cough IE11 and Edge cough) have a more simple, though still spec compliant, implementation of MediaSourceExtensions compared to other browsers. The main issue with this simpler implementation is that MSE will drop data until the next key frame that comes after the time already sent to the decoder. What this means is you cannot append content that overlaps with the playhead (something videojs-contrib-hls relies on for faster mid-segment quality switching) without the risk of visual corruption since the frames needed to decode the new content at the playhead are dropped before being sent to the decoder.

REQUIRES THE FOLLOWING FOR FULL SUPPORT
videojs/mux.js#162
videojs/videojs-contrib-hls#1259

Specific Changes proposed

• The VirtualSourceBuffer will now keep track of the timing information of the GOPs within the segments it appends to the media source buffer. It will inform the transmuxer before transmuxing each segment of a list of time values considered "safe" to append. This will prevent appended video data that overlaps with the playhead while also making sure data is aligned on GOP boundaries to make sure the decoder always has enough information to decode whats appended
• In IE11, a "safe append" mode is used, which tries to append as close to the end of the buffer as possible, instead of as close to the playhead as possible. This further helps prevent the visual corruption seen in IE11 since it needs to append data past what MSE has already sent to the decoder instead of just data that is past the playhead.