HTML5读取mp4视频的元数据

Question

使用HTML5，我正在尝试获取位于mp4文件头部的属性（例如旋转），我使用video标签播放它。为此，我正试图获取组成头部的字节，并知道其结构，找到该原子。

有人知道如何在JavaScript中实现吗？

- Black Cid

Answer 1

您可以使用mediainfo.js，它是一个在javascript中编译的mediainfo（CPP）的移植版本，并使用emscripten编译。

这里有一个可行的示例：https://mediainfo.js.org/

您需要包含js/mediainfo.js文件，并将mediainfo.js.mem文件放在同一文件夹中。

您需要检查此文件的源代码以了解其工作原理: https://mediainfo.js.org/js/mediainfopage.js

[...]

function parseFile(file) {
    if (processing) {
      return;
    }
    processing = true;
    [...]

    var fileSize = file.size, offset = 0, state = 0, seekTo = -1, seek = null;

    mi.open_buffer_init(fileSize, offset);

    var processChunk = function(e) {
      var l;
      if (e.target.error === null) {
        var chunk = new Uint8Array(e.target.result);
        l = chunk.length;
        state = mi.open_buffer_continue(chunk, l);

        var seekTo = -1;
        var seekToLow = mi.open_buffer_continue_goto_get_lower();
        var seekToHigh = mi.open_buffer_continue_goto_get_upper();

        if (seekToLow == -1 && seekToHigh == -1) {
          seekTo = -1;
        } else if (seekToLow < 0) {
          seekTo = seekToLow + 4294967296 + (seekToHigh * 4294967296);
        } else {
          seekTo = seekToLow + (seekToHigh * 4294967296);
        }

        if(seekTo === -1){
          offset += l;
        }else{
          offset = seekTo;
          mi.open_buffer_init(fileSize, seekTo);
        }
        chunk = null;
      } else {
        var msg = 'An error happened reading your file!';
        console.err(msg, e.target.error);
        processingDone();
        alert(msg);
        return;
      }
      // bit 4 set means finalized
      if (state&0x08) {
        var result = mi.inform();
        mi.close();
        addResult(file.name, result);
        processingDone();
        return;
      }
      seek(l);
    };

    function processingDone() {
      processing = false;
      $status.hide();
      $cancel.hide();
      $dropcontrols.fadeIn();
      $fileinput.val('');
    }

    seek = function(length) {
      if (processing) {
        var r = new FileReader();
        var blob = file.slice(offset, length + offset);
        r.onload = processChunk;
        r.readAsArrayBuffer(blob);
      }
      else {
        mi.close();
        processingDone();
      }
    };

    // start
    seek(CHUNK_SIZE);
  }

[...]
// init mediainfo
  miLib = MediaInfo(function() {
    console.debug('MediaInfo ready');
    $loader.fadeOut(function() {
      $dropcontrols.fadeIn();

      window['miLib'] = miLib; // debug
      mi = new miLib.MediaInfo();

      $fileinput.on('change', function(e) {
        var el = $fileinput.get(0);
        if (el.files.length > 0) {
          parseFile(el.files[0]);
        }
      });
    });

以下是项目源码的Github地址：https://github.com/buzz/mediainfo.js

- Val Entin

Answer 2

我认为使用HTML5和其video标签无法从视频中提取如此详细的元数据。您可以提取的仅限于视频长度，视频轨道等，这些内容在此处列出：http://www.w3schools.com/tags/ref_av_dom.asp。

当然，某些浏览器可能提供了特殊的附加方法，但是没有“通用”的方法 - 您需要更多的HTML5现有方法之外的内容。

- olydis

---

嗯...我们可以使用图片，但不能使用视频...太糟糕了。:-/ 感谢您的回答！我认为需要获取视频中的所有字节以执行高级功能。 - Black Cid

@BlackCid，你最终解决了吗？也就是读取元数据的问题？我也很好奇如何获取像视频方向这样的信息。 - Luke

不行，这是不可能的。 最终我决定将方向从原点作为一个变量发送到服务器，并与视频一起存储在数据库中... - Black Cid