一直在尝试使用创建 MPEG 破折号播放器，但视频没有响应

请检查此代码，并帮助我了解文件无法在视频中播放。 这些段首先附加到数组，然后在调用源缓冲区更新端时追加到源缓冲区

$(function() {
    var video = function () {
        this.segmentArray = [];
        this.version = "PressPause 1.0.0",
        this.videoPlayer = document.querySelectorAll("video")[0];
        this.source = new MediaSource();
        this.segmentCheck = 0;
        this.lastTime = 0;
        this.duration = 0;
        this.bandwidth = 0;
        this.duration = "";
        this.InitializationSegment = null;
        this.mpdfile = null;
        this.baseurl = "";
        this.playingSegmentIndex = 0;
        this.bufferUpdated = false;
        this.initRange = 0;
        this.width = 200;
        this.height = 200;
        this.segments = 0;
        this.period = 0;
        this.duration = 0;
        this.codecs = String.EMPTY;
        this.representation = null;
        this.videoPlayer.src = this.mediaUrl;
        this.videoPlayer.pause();
        this.videoPlayer.width = this.width;
        this.videoPlayer.height = this.height;
        var self = this;
        this.videoPlayer.addEventListener("play", function() {
            console.log("from videoplayer play event");
        });
        self.videoPlayer.addEventListener("canplay", function () {
            console.log("can play");
            self.videoPlayer.play();
        });
        self.videoPlayer.addEventListener("loadstart", function () {
            console.log("started loading metadate");
        });
        self.videoPlayer.addEventListener("onloadedmetadata", function() {
            console.log("loaded metadata");
        });
        self.videoPlayer.addEventListener("oncanplaythrough", function() {
            console.log("can play through");
        });

        self.videoPlayer.addEventListener("sourceended", function() {
            console.log("has ended");
        });
        self.videoPlayer.addEventListener("onaddtrack", function() {
            console.log("added track");
        });
        self.videoPlayer.addEventListener("play", function() {
            console.log("called play");
        });
        self.videoPlayer.addEventListener("update", function() {
            console.log("updated");
        });
        self.videoPlayer.addEventListener("loadeddata", function() {
            console.log("has loaded data");
        });
        //this.sourceBuffer= null;o
        this.startInit = false;
        this.source.addEventListener("sourceopen", function() {
            console.log("source has opened " + self.source.readyState);
        });
        this.source.addEventListener("sourceopen", this.init.call(self), false);
        this.source.addEventListener("sourceclose", function() {
            console.log("mediasource closed " +self.source.readyState);
        }, false);
        this.source.addEventListener("sourceended", function () {
            console.log("mediasource ended "+self.source.readyState);
        }, false);
        this.source.addEventListener("endOfStream", function() {
            console.log("have come to end of stream");
        });
        this.sourceBuffer = null;
    }
    video.prototype.timeToDownLoad = function (range) {
        var videoself = this;
        var vidDur = range.split("-");
        // Time = size * 8 / bitrate
        return (((vidDur[1] - vidDur[0]) * 8) / videoself.bandwidth);
    }
    video.prototype.fetchMpd = function (filename) {
        if (this.startInit == false) {
            this.startInit = true;
            var videoself = this;
            var httprequest = new XMLHttpRequest();
            httprequest.open("GET", "PressPause/Media/" + filename + "mpd");
            httprequest.send();
            httprequest.onreadystatechange = function() {
                var self = this;
                if (self.readyState == 4) {
                    if (self.status == 200) {
                        videoself.mpdfile = new DOMParser().parseFromString(self.responseText, "application/xml");
                        videoself.processMpd.call(videoself,videoself.mpdfile);

                    }
                }
            };
        }
    }
    video.prototype.processDuration = function(durationTemp) {
        var worker = durationTemp.split("PT")[1];
        var hour = worker.split("H")[0].slice(0, 1);
        var mins = worker.split("H")[1].slice(0, 2);
        var secss = worker.split("M")[1].slice(0, 5); 
        console.log("the hour is " + hour +" mins "+mins+ " secs "+secss);
    };
    video.prototype.processMpd=function(mpd) {
        this.InitializationSegment = mpd.querySelectorAll("Initialization")[0];
        this.initRange = this.InitializationSegment.getAttribute("range");
        this.period = mpd.querySelectorAll("Period")[0];
        var tempduration = this.period.getAttribute("duration");
        this.processDuration(tempduration);
        this.representation = mpd.querySelectorAll("Representation")[0];
        this.bandwidth = this.representation.getAttribute("bandwidth");
        this.videoPlayer.width = this.representation.getAttribute("width");
        this.videoPlayer.height = this.representation.getAttribute("height");
        this.codecs = this.representation.getAttribute("codecs");
        this.segments = mpd.querySelectorAll("SegmentURL");
        this.processRange(this.initRange);
        this.startInitialization("the url", this.initRange);
        console.log(this.initRange);
    }
    video.prototype.startInitialization = function (url, range) {
        var videoSelf = this;
        while (videoSelf.source.readyState!="open") {
            console.log("mediaSource not open");
        }
        var codecs = 'video/mp4;codecs="avc1.64001E"';
        console.log("can play codec " + codecs + videoSelf.videoPlayer.canPlayType(codecs));
        //'video/mp4;codecs="' + videoSelf.codecs + '"'
        videoSelf.sourceBuffer = videoSelf.source.addSourceBuffer(codecs);
        videoSelf.sourceBuffer.addEventListener("updateend", function () {
            console.log("updateend occurs when the append or remove operation has ended");
            console.log("append mode " + videoSelf.sourceBuffer.AppendMode);
            console.log("buffered below");
            console.log(videoSelf.sourceBuffer.buffered);
            console.log(videoSelf.sourceBuffer.updating); 
        });
        videoSelf.sourceBuffer.addEventListener("update", function () {
            console.log("update occurs when the append or remove operation has ended successfully");
            console.log("append mode " +videoSelf.sourceBuffer.AppendMode);
            console.log("buffered below");
            console.log(videoSelf.sourceBuffer.buffered);
            console.log(videoSelf.sourceBuffer.updating);
        });
        videoSelf.sourceBuffer.addEventListener("error", function () {
            console.log("error occurs when the append or remove operation is aborted by calling abort");
            console.log("append mode " + videoSelf.sourceBuffer.AppendMode);
            console.log("buffered below");
            console.log(videoSelf.sourceBuffer.buffered);
            console.log(videoSelf.sourceBuffer.updating);
        });
        if (url && range) {
            console.log("start processing");
            var httprequest = new XMLHttpRequest();
            httprequest.open("GET", "PressPause/Media/videomp4", true);
            httprequest.responseType = "arrayBuffer";
            httprequest.setRequestHeader("Range", "bytes=" + range);
            httprequest.send();
            httprequest.addEventListener("readystatechange", function() {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        try {
                            videoSelf.sourceBuffer.appendBuffer(new Uint8Array(httprequest.response));
                            videoSelf.videoPlayer.readyState = 2;
                            videoSelf.videoPlayer.pause();
                            videoSelf.videoPlayer.play();
                            console.log("source is "+videoSelf.source.readyState);
                            console.log("player is " + videoSelf.videoPlayer.readyState);
                            console.log("player error is " + videoSelf.videoPlayer.error);
                            videoSelf.sourceBuffer.addEventListener("updateend", videoSelf.startProcessingSegments.bind(videoSelf));

                        } catch (e) {
                            console.log(e.message + "from startInitialization " + e);
                        }
                    }
                }
            });

        } else {
            throw new Error("range and url cannot be undefined");
        }
    }
    video.prototype.startProcessingSegments = function () {
        var self = this;
        console.log(self);
        console.log("starting to fetch data");
        self.sourceBuffer.addEventListener("updateend", self.isupdating.bind(self), false);
        self.isupdating.call(self);
        console.log("from startProcessingSegments " + self.source.activeSourceBuffers);
        console.log("from startProcessingSegments " + self.playingSegmentIndex);
        console.log("can play type= " + self.videoPlayer.canPlayType('video/mp4;codecs="' + self.codecs + '"'));
        self.bufferUpdated = true;
        console.log(self.source.sourceBuffers);
        console.log(self.sourceBuffer.buffered);
    }
    video.prototype.isupdating = function () {
        var self = this;
        self.videoPlayer.removeEventListener("updateend", self.startProcessingSegments);
        for (self.playingSegmentIndex; self.playingSegmentIndex < self.segments.length; self.playingSegmentIndex++) {
            console.log(self.sourceBuffer.updating);
            self.checkSegmentArray.call(self);
            self.playSegment("url", self.segments[self.playingSegmentIndex].getAttribute("mediaRange"));
        }

    };
    video.prototype.addingSegmentIndex = 0;
    video.prototype.checkSegmentArray = function () {
        var videoS = this;
        if (videoS.segmentArray.length > 0 && !videoS.sourceBuffer.updating) {
            var thevideo = videoS.segmentArray.shift();
            videoS.sourceBuffer.appendBuffer(thevideo);
            console.log("adding segment called"+videoS.addingSegmentIndex +" times");
            console.log(thevideo);
            videoS.addingSegmentIndex++;
        }
        console.log(videoS.videoPlayer.readyState);
        console.log(videoS.sourceBuffer);
        console.log(videoS.segmentArray.length + " items left");
        console.log(videoS.sourceBuffer.updating);
        console.log(videoS.source.readyState);
        console.log("from checkSegmentArray");
        console.log("'n");
    }

    video.prototype.playSegment = function (url, range) {
        console.log("it happend again");
        var videoSelf = this;
        var httprequest = new XMLHttpRequest();
        httprequest.open("GET", "PressPause/Media/videomp4", true);
        httprequest.setRequestHeader("Range", "bytes=" + range);
        httprequest.responseType = "arrayBuffer";
        httprequest.send();
        httprequest.onreadystatechange=function(e) {
            if (this.readyState == 4) {
                if (this.status == 200) {
                    videoSelf.segmentArray.push(new Uint8Array(httprequest.response));
                    videoSelf.checkSegmentArray.call(videoSelf);
                }
            }
        }
    };
    video.prototype.processRange= function(range) {
        var rangeArray = range.toString().split("-");
        var first = rangeArray[0];
        var second = rangeArray[1];
        console.log("first: " + first, "second " + second);
    }
    video.prototype.init = function () {
        console.log("calling mpd");
        if (this.startInit==false) {
            this.fetchMpd("video");
        }
    }

the new mpd generated using ffmpeg how can i process it in javascript what should i be looking for
<MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:mpeg:DASH:schema:MPD:2011" xsi:schemaLocation="urn:mpeg:DASH:schema:MPD:2011" type="static" mediaPresentationDuration="PT110.2S" minBufferTime="PT1S" profiles="urn:webm:dash:profile:webm-on-demand:2012">
<Period id="0" start="PT0S" duration="PT110.2S">
<AdaptationSet id="0" mimeType="video/webm" codecs="vp8" lang="eng" width="1280" height="720" bitstreamSwitching="true" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
<Representation id="0" bandwidth="134033">
<BaseURL>C:'Users'solo'newfilemuxer.webm</BaseURL>
<SegmentBase indexRange="1223146-1223345">
<Initialization range="0-249"/>
</SegmentBase>
</Representation>
</AdaptationSet>
</Period>