html5 (youtube) 视频标签说明

Posted 2023-05-07

【中文标题】html5 (youtube) 视频标签说明

【英文标题】：html5 (youtube) video tag explanation

【发布时间】：2017-03-22 08:52:11

【问题描述】：

我需要在我的网站上托管一些视频。我在看 youtube 是如何做到的，但我不明白视频来源。以下是 youtube 中的视频标签。源是一个blob，为什么？网址是什么意思？它是如何工作的？我怎么能做同样的事情？

<div class="html5-video-container" data-layer="0">
    <video tabindex="-1" class="video-stream html5-main-video" 
    style="width: 640px; height: 360px; left: 0px; top: 0px; opacity: 1;" 
    src="blob:https://www.youtube.com/9effef84-87ae-43c0-abae-8005d399e1fd">
    </video>
</div>

提前谢谢你。

【参考方案1】：

YouTube 在 firefox 中使用 MediaSource Extensions (MSE)，src 看起来像“mediasource:https://www.youtube.com/9effef84-87ae-43c0-abae-8005d399e1fd” 要使用 MediaSource，您需要将视频转换为 mpeg-dash 格式。这意味着视频将被分成几个文件。其中之一（元数据文件 .mp4）将包含 moov 原子和其他 (.m4s) moof 和 MDAT 原子。 您可以使用 ffmpeg 实现此目的，并使用 xmlhttprequest 或 webSocket 在浏览器中下载它。 也可以使用 Blob 的小例子：

	xhr.open('GET', "http://localhost:1313/1.mp4", true);
	xhr.responseType = 'arraybuffer';
	xhr.onload = function()
		file = new Blob([ new Uint8Array(xhr.response) ], type: 'video/mp4');
		document.querySelector("video").src = URL.createObjectURL(file);
		
	xhr.send();