Javascript 如何使用媒体源扩展将音频添加到视频流_Javascript_Video Streaming_Html5 Audio_Media Source_Mp4box

Javascript 如何使用媒体源扩展将音频添加到视频流

javascript video-streaming

Javascript 如何使用媒体源扩展将音频添加到视频流,javascript,video-streaming,html5-audio,media-source,mp4box,Javascript,Video Streaming,Html5 Audio,Media Source,Mp4box,我有一个mp4文件sample.mp4。我使用mp4box将其转换为段，并使用现在我的代码来自于此。创建片段后，将在浏览器中播放视频。但是没有音频形成的文件如下：我这里有两个问题首先，如何在MSE（媒体源扩展）中使用javascript向该视频添加音频？视频正在静音模式下播放其次，新格式文件的名称为sample_dash_track1_init.mp4和sample_dash_track2_init.mp4。当视频播放第一个文件及其片段时，第二个文件及其片段有什么用途 `<

我有一个mp4文件sample.mp4。我使用mp4box将其转换为段，并使用现在我的代码来自于此。创建片段后，将在浏览器中播放视频。但是没有音频

形成的文件如下：

我这里有两个问题

首先，如何在MSE（媒体源扩展）中使用javascript向该视频添加音频？视频正在静音模式下播放

其次，新格式文件的名称为sample_dash_track1_init.mp4和sample_dash_track2_init.mp4。当视频播放第一个文件及其片段时，第二个文件及其片段有什么用途

 `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
  <title>MSE Demo</title>
 </head>
 <body>
 <h1>MSE Demo</h1>
  <div>
   <video controls width="80%" ></video>
  </div>

  <script type="text/javascript">
  (function() {
  var baseUrl = 'http://beta.insidesoftwares.com/development/video/sam/';
  var initUrl = baseUrl + 'sample_dash_track1_init.mp4';
  var templateUrl = baseUrl + 'sample_dash_track1_$Number$.m4s';
  var sourceBuffer;
  var index = 1;
  var numberOfChunks = 13;
  var video = document.querySelector('video');

  if (!window.MediaSource) {
    console.error('No Media Source API available');
    return;
  }

  var ms = new MediaSource();
  video.src = window.URL.createObjectURL(ms);
  ms.addEventListener('sourceopen', onMediaSourceOpen);

  function onMediaSourceOpen() {
    sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.4d401f"');
    sourceBuffer.addEventListener('updateend', nextSegment);

    GET(initUrl, appendToBuffer);

    video.play();
  }

  function nextSegment() {
    var url = templateUrl.replace('$Number$', index);
    GET(url, appendToBuffer);
    index++;
    if (index > numberOfChunks) {
      sourceBuffer.removeEventListener('updateend', nextSegment);
    }
  }

  function appendToBuffer(videoChunk) {
    if (videoChunk) {
      sourceBuffer.appendBuffer(new Uint8Array(videoChunk));
    }
  }

  function GET(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = 'arraybuffer';

    xhr.onload = function(e) {
      if (xhr.status != 200) {
        console.warn('Unexpected status code ' + xhr.status + ' for ' + url);
        return false;
      }
      callback(xhr.response);
    };

    xhr.send();
   }
   })();
  </script>
  </body>
  </html>`

`
MSE演示
MSE演示
（功能（）{
var baseUrl=http://beta.insidesoftwares.com/development/video/sam/';
var initUrl=baseUrl+'sample_dash_track1_init.mp4'；
var templateUrl=baseUrl+'sample_dash_track1_$Number$.m4s'；
var源缓冲区；
var指数=1；
var numberOfChunks=13；
var video=document.querySelector（'video'）；
如果（！window.MediaSource）{
console.error（“没有可用的媒体源API”）；
返回；
}
var ms=new MediaSource（）；
video.src=window.URL.createObjectURL（ms）；
ms.addEventListener（'sourceopen'，onMediaSourceOpen）；
函数onMediaSourceOpen（）{
sourceBuffer=ms.addSourceBuffer（'video/mp4；codecs=“avc1.4d401f”）；
addEventListener（'updateend'，nextSegment）；
GET（initUrl，appendToBuffer）；
video.play（）；
}
函数nextSegment（）{
var url=templateUrl.replace（“$Number$”，索引）；
获取（url、appendToBuffer）；
索引++；
如果（索引>numberOfChunks）{
removeEventListener（'updateend'，nextSegment）；
}
}
函数appendToBuffer（视频块）{
如果（视频块）{
appendBuffer（新的Uint8Array（videoChunk））；
}
}
函数GET（url，回调）{
var xhr=new XMLHttpRequest（）；
xhr.open（'GET'，url）；
xhr.responseType='arraybuffer'；
xhr.onload=函数（e）{
如果（xhr.status！=200）{
console.warn（“+url”的意外状态代码“+xhr.status+”）；
返回false；
}
回调（xhr.response）；
};
xhr.send（）；
}
})();
`

我猜示例1*包含视频，示例2*包含音频。因此，您的手写JavaScript播放器只播放视频，因为示例_dash_track1*中只有视频

虽然我喜欢你的JavaScript播放器-你可能想看看

否则，您将不得不解析mpd文件并动态重新加载，这是以前在DASH.js库中完成的大量工作。

我猜示例DASH\u track1*包含视频，示例DASH\u track2*包含音频。因此，您的手写JavaScript播放器只播放视频，因为示例_dash_track1*中只有视频

虽然我喜欢你的JavaScript播放器-你可能想看看

否则，您将不得不解析mpd文件并动态remux，这是以前在DASH.js库中完成的大量工作。

谢谢您的回答。感谢您的回复。一些疑问。您指出的dash.js文件似乎是通过渐进式下载本地文件来播放该文件的。我把它的MPD扩展文件的url。一个MPD文件如何帮助从任何地方播放该文件？目前在dash.js中，我正在播放的文件是从一开始就播放的，而不是从中间的任何地方播放。这是有问题的，因为我不能通过寻找文件中间的点来播放文件。有没有办法将音频源缓冲区添加到我在问题中提出的代码中？以不同的方式处理mpd文件可以防止在使用dash player时出现上述注释中的错误。需要使用以下代码进行处理。谢谢您的回答。感谢您的回复。一些疑问。您指出的dash.js文件似乎是通过渐进式下载本地文件来播放该文件的。我把它的MPD扩展文件的url。一个MPD文件如何帮助从任何地方播放该文件？目前在dash.js中，我正在播放的文件是从一开始就播放的，而不是从中间的任何地方播放。这是有问题的，因为我不能通过寻找文件中间的点来播放文件。有没有办法将音频源缓冲区添加到我在问题中提出的代码中？以不同的方式处理mpd文件可以防止在使用dash player时出现上述注释中的错误。需要使用以下代码进行处理，如下所示