Stream HLS on safari using MediaSource api

问题

I want to stream HLS fragments using media source extension. I have tried the same using mpeg-dash fragments (generated using MP4Box) and media source extension.

var mediaSource = new window.MediaSource();
mediaSource.addEventListener('sourceopen', _onSourceOpen);
$('video').attr('src', URL.createObjectURL(self.mediaSource));

function _onSourceOpen() {
    sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64000d,mp4a.40.2"');
}

function _onFragmentDataLoad(data) {
    sourceBuffer.appendBuffer(data);
}

It plays smoothly on chrome, Windows 8 IE, android chrome. It also on works on safari but it doesn't get total duration of media. So I tried same with HLS fragments on safari. Produced HLS data has .m3u8 file and other .ts fragments. When I assign .m3u8 file as source to video element:

$('video').attr('src', 'filename.m3u8');

things work like charm. But then I loose the control on transport. To have complete control on transport and responsive resolution change, I tried putting .ts fragments one by one into initialised sourcebuffer. It fails badly in safari. But same HLS fragments play well with exo player. My questions are: 1. How to achieve HLS streaming on safari using Media Source Extension. 2. As HLS generation doesn't produce any init fragment unlike dash generation, how does media player understand duration and other metadata? 3. How to get the codec of this HLS? Or there is any codec that is by default supported by safari and can be used here?

Thanks.

来源：https://stackoverflow.com/questions/30388198/stream-hls-on-safari-using-mediasource-api