时间戳

首页 > 解决方案 > 如何使用媒体源扩展将音频添加到视频流

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

问题描述

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

形成的文件如下： 使用 mp4box 将 sample.mp4 转换为 mpd 后形成的文件

我在这里有两个疑问。

首先，如何在 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>`

标签： javascriptvideo-streaminghtml5-audiomedia-sourcemp4box

解决方案

我猜 sample_dash_track1* 包含视频，而 sample_dash_track2* 包含音频。因此，您的手写 JavaScript 播放器仅播放视频，因为 sample_dash_track1* 中只有视频。

虽然我喜欢你的 JavaScript 播放器 - 你可能想看看https://github.com/Dash-Industry-Forum/dash.js？

否则，您将不得不解析 mpd 文件并动态重新混合，这是之前已经完成的大量工作，例如在 DASH.js 库中。

推荐阅读