Chrome показывает - Uncaught InvalidStateError: Не удалось выполнить "addSourceBuffer" на "MediaSource": MediaSource's readyState не "открыт"

Question

/*Working with HTML5 media source extensions to play the segmented video (segmented by mp4box). It is working fine in Firefox(version 50) but in google chrome (version 53) it is displaying error.

Работа с расширениями медиа-источника HTML5 для воспроизведения сегментированного видео (сегментировано mp4box). В Firefox(версия 50) он работает нормально, но в Google Chrome (версия 53) отображается ошибка.
Шаги для воспроизведения: разделение 1-минутного видео.mp4 на 20-секундные сегменты с помощью mp4box. Команда ---> mp4box -dash 20000 -segment-name сегмент_ myvideo.mp4
В коде только один сегмент. В Firefox 20 секунд играет отлично, но в Google Chrome он не играет

here is the code */
<pre>
<video id="v" autoplay controls > </video>
<script>

    var segments=["segment_init.mp4","segment_1.m4s"];
    var video= document.getElementById("v")
    var mediaSource = new MediaSource();
    video.src= URL.createObjectURL(mediaSource);
    var sourceBuffer;
    mediaSource.addEventListener("sourceopen",onSourceOpen);

    function onSourceOpen()
    {
    dowloadSegment(segments[0],function(buffer) {
    sourceBuffer = mediaSource.addSourceBuffer(codec) // mp4
    sourceBuffer.appendBuffer(buffer);
    addSegment(1);//  adding first segment
    });
    }

    function addSegment(segid)
    {
    dowloadSegment(segments[segid],function(buffer) { 
    sourceBuffer.appendBuffer(buffer);
    });
    }

    function dowloadSegment(url,callback)
    {
     //here getting  xmlhhtprequest response
       callback(response) ;//  segment data

    }

</script>

</pre>