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

问题描述

我有一个mp4文件sample.mp4。我使用mp4box将其转换为片段,然后使用how to create a mpd file using MP4Box进行mpd 现在,我的代码来自此source。 创建片段后,将在浏览器中播放视频。但是没有音频。

形成的文件如下:

Files formed after conversion of sample.mp4 to mpd using 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>`

解决方法

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

尽管我喜欢您的JavaScript播放器-您可能想看看https://github.com/Dash-Industry-Forum/dash.js

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

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...