初识 HTML5 Video Blob

Posted 2023-05-16

参考技术A

为何会有一个 blob？直接点击这个链接，返回了 404！什么情况？于是对此做了一番探索。

The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here .

首先创建变量名为 video 的 DOM 对象和变量名为 mediaSource 的 MediaSource 对象。通过函数 createObjectURL 来将 DOM::video 对象的属性 src 和 mediaSource 进行“连接”。接下来，通过注册事件 Event::sourceopen 来触发当上述“连接”结束之后的回调处理。回调处理就是需要赋值 视频数据 的地方。 调用 MediaSource::addSourceBuffer 方法来构建一个存放视频数据的 sourceBuffer。 在往 sourceBuffer 中存放数据结束之后会触发事件 Event::updateend 。通过注册这个事件的回调，可以知晓数据已经加载完毕，然后关闭数据流，调用 Video::play 函数通知浏览器播放视频。至此，整个 Blob 运行机制讲解完毕。

W3C 上有明确关于 MediaSource 扩展接口的文档。扩展文档中是这么定义的， 它允许 JS 脚本动态构建媒体流和允许 JS 传送媒体块到 H5 媒体元素。这种接口的应用可以让 H5 播放器实现持续添加数据进行播放。

综上，这个只是 html5 提供的新特性，但是截止目前还是处于试验状态。

在上面示例中使用的视频格式不是普通的 MP4 而是 FMP4 。如果没有注意到这个问题，就可能造成：
HTML5 MediaSource works with some mp4 files and not with others (same codecs)。

解决方案：
It works fine if mp4 is fragmented.
You can do that using Bento4\'s mp4fragment tool.

javascript实现blob加密视频源地址的方法

javascript实现blob加密视频源地址的方法

 一、HTML代码：

<video id="my-video" class="video-js" playsinline controls preload="auto" controlslist="nodownload" controlslist="nofullscreen" width="100%" height="240"
      poster="upload/moviepic/2019-08-02/1564739500xyzp.png" data-setup="{}">
    <source src="" type="video/mp4">
    <source src="" type="video/ogg">
    <source src="" type="video/webm">
    <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
  </video>

二、JavaScript代码：

 <script type="text/javascript">
  var video = document.getElementById("my-video");
  window.URL = window.URL || window.webkitURL;
  var xhr = new XMLHttpRequest();
  var play_url = ‘test.mp4‘;
  xhr.open("GET", play_url, true);
  xhr.responseType = "blob";
  xhr.onload = function() {
  if (this.status == 200) {
  var blob = this.response;
  console.log(blob);
  video.onload = function(e) {
  window.URL.revokeObjectURL(video.src);
  };
  video.src = window.URL.createObjectURL(blob);
  }
  }
  xhr.send();
 </script>