Question

有人可以解释此视频代码中网址blob:表示的内容吗？

<video class="" 
       style="width: 640px; height: 360px; left: 0px; top: 0px; transform: none; opacity: 1;" 
       src="blob:https://www.youtube.com/5c42620b-a028-451b-9b64-424996802355">
</video>

Answer 1

这是一个shaka player的YouTube视频，使用Media Source Extensions播放没有浏览器插件的DASH内容。

blob网址由createObjectURL生成。例如：

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);
}

Answer 2

它表示该url是使用createObjectURL对象的URL静态方法创建的。 createObjectURL采用一个参数，该参数应为以下参数之一Blob，File或MediaSource对象，它返回一个表示参数给定对象的URL。（请参阅MDN - URL.createObjectURL）

您可以在控制台中尝试console.log(URL.createObjectURL(new MediaSource()));，以证明它创建了“ blob：https：// ...（url）...”。但是，通常应将src元素的video属性设置为引用创建的对象url，而该URL本身就是对MediaSource对象的引用。然后，您可以使用XMLHttpRequest获取视频资产流，并将响应作为缓冲区附加到MediaSource对象，您可以从此 live demo了解确切的详细信息位于https://developer.mozilla.org/en-US/docs/Web/API/MediaSource#Examples .. 上。这可以更好地控制流，例如，您可以使用它来允许诸如播放速度和视频质量调整之类的功能。

但这是我阅读过的旧方法，最终支持会从较新的浏览器中消失（请参阅“ browsers are removing support for doing this”）。新方法是仅将srcObject元素的video属性设置为直接引用MediaSource对象，而不必执行使用{{1 }}（请参阅MDN - srcObject attribute） ..

Answer 3

斑点是一个高级对象，代表不变的原始二进制数据。

See examples in javascript and HTML tags

Blob intreface W3 definition

<video src =“blob：url”>中的blob是什么？

3 个答案: