个人中心
gpt4 book ai didi

HTML5 MediaSource 适用于某些 mp4 文件而不适用于其他文件(相同的编解码器)

转载 作者：行者123 更新时间：2023-12-01 13:38:32 29 4
gpt4 key购买 nike

我在玩 MediaSource API。代码直接取自 Mozilla 的示例页面:https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/endOfStream

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <video controls></video>
    <script>
      var video = document.querySelector('video');

      var assetURL = 'frag_bunny.mp4';
      // Need to be specific for Blink regarding codecs
      // ./mp4info frag_bunny.mp4 | grep Codec
      var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

      if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
        var mediaSource = new MediaSource;
        //console.log(mediaSource.readyState); // closed
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);
      } else {
        console.error('Unsupported MIME type or codec: ', mimeCodec);
      }

      function sourceOpen (_) {
        //console.log(this.readyState); // open
        var mediaSource = this;
        var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        fetchAB(assetURL, function (buf) {
          sourceBuffer.addEventListener('updateend', function (_) {
            mediaSource.endOfStream();
            video.play();
            //console.log(mediaSource.readyState); // ended
          });
          sourceBuffer.appendBuffer(buf);
        });
      };

      function fetchAB (url, cb) {
        console.log(url);
        var xhr = new XMLHttpRequest;
        xhr.open('get', url);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
          cb(xhr.response);
        };
        xhr.send();
      };
    </script>
  </body>
</html>

除非我使用另一个视频，否则这很好用。
我有一个简短的测试 mp4，根据 Bento4 的 mp4info，它使用与 frag_bunny.mp4 相同的编解码器进行编码。它在 mediaSource.endOfStream(); 崩溃因为 
Uncaught DOMException: Failed to execute 'endOfStream' on 'MediaSource': The MediaSource's readyState is not 'open'.
    at SourceBuffer.<anonymous>

我认为视频文件必须满足一些特定的标准才能使用它，但我不知道它们。

有人可以指出我正确的方向吗？

有关文件的更多详细信息

frag_bunny mp4info 
File:
  major brand:      mp42
  minor version:    1
  compatible brand: mp42
  compatible brand: avc1
  compatible brand: iso5

Movie:
  duration:   60095 ms
  time scale: 1000
  fragments:  yes

Found 4 Tracks
Track 1:
  flags:        7 ENABLED IN-MOVIE IN-PREVIEW
  id:           1
  type:         Audio
  duration: 60095 ms
  language: eng
  media:
    sample count: 0
    timescale:    22050
    duration:     0 (media timescale units)
    duration:     0 (ms)
    bitrate (computed): 65.075 Kbps
  Sample Description 0
    Coding:      mp4a (MPEG-4 Audio)
    Stream Type: Audio
    Object Type: MPEG-4 Audio
    Max Bitrate: 0
    Avg Bitrate: 64000
    Buffer Size: 6144
    Codecs String: mp4a.40.2
    MPEG-4 Audio Object Type: 2 (AAC Low Complexity)
    MPEG-4 Audio Decoder Config:
      Sampling Frequency: 22050
      Channels: 2
    Sample Rate: 22050
    Sample Size: 16
    Channels:    2
Track 2:
  flags:        7 ENABLED IN-MOVIE IN-PREVIEW
  id:           2
  type:         Video
  duration: 60095 ms
  language: eng
  media:
    sample count: 0
    timescale:    600
    duration:     0 (media timescale units)
    duration:     0 (ms)
    bitrate (computed): 612.178 Kbps
  display width:  640.000000
  display height: 360.000000
  Sample Description 0
    Coding:      avc1 (H.264)
    Width:       640
    Height:      360
    Depth:       24
    AVC Profile:          66 (Baseline)
    AVC Profile Compat:   e0
    AVC Level:            30
    AVC NALU Length Size: 4
    AVC SPS: [2742e01ea9181405ff2e00d418041adb0ad7bdf010]
    AVC PPS: [28de09c8]
    Codecs String: avc1.42E01E
Track 3:
  flags:        7 ENABLED IN-MOVIE IN-PREVIEW
  id:           3
  type:         Hint
  duration: 60095 ms
  language: eng
  media:
    sample count: 0
    timescale:    90000
    duration:     0 (media timescale units)
    duration:     0 (ms)
    bitrate (computed): 45.859 Kbps
  Sample Description 0
    Coding:      rtp  (RTP Hints)
Track 4:
  flags:        7 ENABLED IN-MOVIE IN-PREVIEW
  id:           4
  type:         Hint
  duration: 60095 ms
  language: eng
  media:
    sample count: 0
    timescale:    22050
    duration:     0 (media timescale units)
    duration:     0 (ms)
    bitrate (computed): 5.510 Kbps
  Sample Description 0
    Coding:      rtp  (RTP Hints)

我的视频的 mp4info 
File:
  major brand:      mp42
  minor version:    0
  compatible brand: mp42
  compatible brand: isom
  compatible brand: avc1

Movie:
  duration:   5568 ms
  time scale: 90000
  fragments:  no

Found 2 Tracks
Track 1:
  flags:        1 ENABLED
  id:           1
  type:         Video
  duration: 5533 ms
  language: und
  media:
    sample count: 166
    timescale:    90000
    duration:     498000 (media timescale units)
    duration:     5533 (ms)
    bitrate (computed): 465.670 Kbps
  display width:  560.000000
  display height: 320.000000
  frame rate (computed): 30.000
  Sample Description 0
    Coding:      avc1 (H.264)
    Width:       560
    Height:      320
    Depth:       24
    AVC Profile:          66 (Baseline)
    AVC Profile Compat:   c0
    AVC Level:            30
    AVC NALU Length Size: 4
    AVC SPS: [6742c01e9e218118534d40404050000003001000000303c8f162ee]
    AVC PPS: [68ce06cb20]
    Codecs String: avc1.42C01E
Track 2:
  flags:        3 ENABLED IN-MOVIE
  id:           2
  type:         Audio
  duration: 5568 ms
  language: eng
  media:
    sample count: 261
    timescale:    48000
    duration:     267264 (media timescale units)
    duration:     5568 (ms)
    bitrate (computed): 83.050 Kbps
  Sample Description 0
    Coding:      mp4a (MPEG-4 Audio)
    Stream Type: Audio
    Object Type: MPEG-4 Audio
    Max Bitrate: 91632
    Avg Bitrate: 83051
    Buffer Size: 280
    Codecs String: mp4a.40.2
    MPEG-4 Audio Object Type: 2 (AAC Low Complexity)
    MPEG-4 Audio Decoder Config:
      Sampling Frequency: 48000
      Channels: 1
    Sample Rate: 48000
    Sample Size: 16
    Channels:    1

Chrome 版本:55.0.2883.95(64 位)

最佳答案

如果 mp4 碎片化，t 工作正常。你可以使用bento4的来做到这一点。 mp4fragment 您可以在此处找到的工具:
https://www.bento4.com/documentation/mp4fragment/

关于HTML5 MediaSource 适用于某些 mp4 文件而不适用于其他文件(相同的编解码器)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42234078/

29 4 0
文章推荐： 具有持久 session 的 HiveMQ 共享订阅
文章推荐： java - 图片太大 : OutOfMemory Exception
文章推荐： java - 代码移至 CloudHub 时无法找到文件
文章推荐： maven - 小烦恼 : edu. emory.mathcs.backport.java.util
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com