html5(youtube)视频标签说明

时间:2016-11-08 16:23:26

标签: video video-streaming html5-video media-source

我需要在我的网站上托管一些视频。我正在寻找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 个答案:

答案 0 :(得分:0)

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

&#13;
&#13;
	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();
&#13;
&#13;
&#13;