【问题标题】:html5 (youtube) video tag explanationhtml5 (youtube) 视频标签说明
【发布时间】: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>

提前谢谢你。

【问题讨论】:

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


    【解决方案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();

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-07-06
      • 2012-11-11
      • 1970-01-01
      • 2014-10-22
      • 2016-08-03
      • 2017-04-09
      • 2012-10-22
      相关资源
      最近更新 更多