一直在尝试创建一个 mpeg dash 播放器，但视频没有响应
have been trying to create an mpeg dash player using but video is not responding
请检查此代码并帮我看看哪里出了问题该文件无法在视频中播放。这些段首先附加到数组，然后在调用 sourcebuffer updateend 时附加到源缓冲区
$(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>
请检查此代码并帮我看看哪里出了问题该文件无法在视频中播放。这些段首先附加到数组，然后在调用 sourcebuffer updateend 时附加到源缓冲区
$(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>