video src blob

javascript
  目录
  1. 1. 例子
  2. 2. 分析
  3. 3. 总结

html中的video标签，src属性是blob类型

例子

在哔哩哔哩看视频时，审查页面中的播放器，可以看到如下代码:

1
<video crossorigin="anonymous" preload="auto" src="blob:https://www.bilibili.com/fccf2603-28b1-43a1-a85e-49ed045f300d"></video>

直接复制src属性的值，在浏览器中打开是404。
其实，blob:开头的地址，是利用URL.createObjectURL将blob类型数据处理成在内存中的地址形式。

分析

上边的例子，用几行代码可以实现。

1
2
3
4
5
function playVideo(videoStream){ // as blob 
  var video = document.querySelector('video');
  var videoUrl=window.URL.createObjectURL(videoStream);
  video.src = videoUrl;
}

但是，视频网站中使用MediaSource对象配合video实现视频播放，代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const video = document.querySelector('video');

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

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
  const 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
  const mediaSource = this;
  const 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);
  const xhr = new XMLHttpRequest;
  xhr.open('get', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function () {
    cb(xhr.response);
  };
  xhr.send();
};

上述代码也是一次性请求到数据并播放，可以稍作修改，实现续传方式的播放。

总结

这里只是简单的介绍video的src属性值是blob类型的处理方法，在实际应用中可以使用视频播放库来实现。
常用库:

  html