diff options
Diffstat (limited to 'files/zh-cn/web/api/media_source_extensions_api/index.html')
| -rw-r--r-- | files/zh-cn/web/api/media_source_extensions_api/index.html | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/media_source_extensions_api/index.html b/files/zh-cn/web/api/media_source_extensions_api/index.html new file mode 100644 index 0000000000..c72a6896b5 --- /dev/null +++ b/files/zh-cn/web/api/media_source_extensions_api/index.html @@ -0,0 +1,150 @@ +--- +title: Media Source Extensions API +slug: Web/API/Media_Source_Extensions_API +translation_of: Web/API/Media_Source_Extensions_API +--- +<p>{{DefaultAPISidebar("Media Source Extensions")}}{{ SeeCompatTable() }}</p> + +<p>媒体源扩展 API（MSE） 提供了实现无插件且基于 Web 的流媒体的功能。使用 MSE，媒体串流能够通过 JavaScript 创建，并且能通过使用 {{htmlelement("audio")}} 和 {{htmlelement("video")}} 元素进行播放。</p> + +<h2 id="概念和用法">概念和用法</h2> + +<p>近几年来，我们已经可以在 Web 应用程序上无插件地播放视频和音频了。但是，现有架构过于简单，只能满足一次播放整个曲目的需要，无法实现拆分/合并数个缓冲文件。流媒体直到现在还在使用 Flash 进行服务，以及通过 RTMP 协议进行视频串流的 Flash 媒体服务器。</p> + +<h3 id="MSE_标准">MSE 标准</h3> + +<p>媒体源扩展（MSE）实现后，情况就不一样了。MSE 使我们可以把通常的单个媒体文件的 <code>src</code> 值替换成引用 <code>MediaSource</code> 对象（一个包含即将播放的媒体文件的准备状态等信息的容器），以及引用多个 <code>SourceBuffer</code> 对象（代表多个组成整个串流的不同媒体块）的元素。MSE 让我们能够根据内容获取的大小和频率，或是内存占用详情（例如什么时候缓存被回收），进行更加精准地控制。 <span class="short_text" id="result_box" lang="zh-CN"><span>它是</span></span><span class="short_text" lang="zh-CN"><span>基于它可扩展的 API 建立自适应比特率流客户端（例如DASH 或 </span></span>HLS<span class="short_text" lang="zh-CN"><span> 的客户端）的基础。</span></span></p> + +<p>在现代浏览器中创造能兼容 MSE 的媒体（assets）非常费时费力，还要消耗大量计算机资源和能源。此外，还须使用外部实用程序将内容转换成合适的格式。虽然浏览器支持兼容 MSE 的各种媒体容器，但采用 H.264 视频编码、AAC 音频编码和 MP4 容器的格式是非常常见的，且一定兼容。MSE 同时还提供了一个 API，用于运行时检测容器和编解码是否受支持。</p> + +<p>如果没有精确的控制时间、媒体质量和内存释放等需求，使用 {{htmlelement("video")}} 和 {{htmlelement("source")}} 是一个更加简单但够用的方案。</p> + +<h3 id="DASH">DASH</h3> + +<p>DASH（Dynamic Adaptive Streaming over HTTP ）是一个规范了自适应内容应当如何被获取的协议。它实际上是建立在 MSE 顶部的一个层，用来构建自适应比特率串流客户端。虽然已经有一个类似的协议了（例如 HTTP 串流直播（HLS）），但 DASH 有最好的跨平台兼容性，这就是我们在这里介绍它的原因。</p> + +<p><span class="short_text" id="result_box" lang="zh-CN"><span>DASH 将大量逻辑从网络协议中移出到客户端应用程序逻辑中，使用更简单的 HTTP 协议获取文件。</span></span> <span id="result_box" lang="zh-CN"><span>这样就可以用一个简单的静态文件服务器来支持 DASH，这对CDN也很友好。</span></span><span id="result_box" lang="zh-CN"><span>这与之前的流传输解决方案形成鲜明对比，那些流解决方案需要昂贵的许可证来获得非标准的客户端/服务器协议才能实现。</span></span></p> + +<p><span id="result_box" lang="zh-CN"><span>DASH 的两个最常见的用例涉及“点播”或“直播”观看内容。点播功能让开发者有时间把媒体文件转码出多种不同的分辨率质量。</span></span></p> + +<p>实时处理内容会引入由转码和播发带来的延迟。因此 DASH 并不适用于类似 <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 的即时通讯。但它可以支持比 WebRTC 更多的客户端连接。</p> + +<p>有非常多的自由开源的工具，能实现转码内容，并将其改造，以适应 DASH、DASH 文件服务器和用 JavaScript 编写的 DASH 客户端库。</p> + +<h2 id="媒体源扩展接口">媒体源扩展接口</h2> + +<dl> + <dt>{{domxref("MediaSource")}}</dt> + <dd>代表了将由 {{domxref("HTMLMediaElement")}} 对象播放的媒体资源。</dd> + <dt>{{domxref("SourceBuffer")}}</dt> + <dd>代表了一个经由 <code>MediaSource</code> 对象被传入 {{domxref("HTMLMediaElement")}} 的媒体块。</dd> + <dt>{{domxref("SourceBufferList")}}</dt> + <dd>列出多个 <code>SourceBuffer</code> 对象的简单的容器列表。</dd> + <dt>{{domxref("VideoPlaybackQuality")}}</dt> + <dd>包含了有关正被 {{htmlelement("video")}} 元素播放的视频的质量信息，例如被丢弃或损坏的帧的数量。由 {{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} 方法返回。</dd> + <dt>{{domxref("TrackDefault")}}</dt> + <dd>为在媒体块的<a href="http://w3c.github.io/media-source/#init-segment">初始化段（initialization segments）</a>中没有包含类型、标签和语言信息的轨道，提供一个包含这些信息的 {{domxref("SourceBuffer")}}。</dd> + <dt>{{domxref("TrackDefaultList")}}</dt> + <dd>列出多个 <code>TrackDefault</code> 对象的简单的容器列表。</dd> +</dl> + +<h2 id="其他接口的扩展">其他接口的扩展</h2> + +<dl> + <dt>{{domxref("URL.createObjectURL()")}}</dt> + <dd>创建一个指向一个 <code>MediaSource</code> 对象的 URL。要求此 URL 可以被指定为一个用来播放媒体流的 HTML 媒体元素的 <code>src</code> 的值。</dd> + <dt>{{domxref("HTMLMediaElement.seekable")}}</dt> + <dd>当一个 <code>MediaSource</code> 对象被 HTML 媒体元素播放时，此属性将返回一个包含用户能够在什么时间范围内进行调整的对象 {{domxref("TimeRanges")}}。</dd> + <dt>{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}}</dt> + <dd>针对正在播放的视频，返回一个 {{domxref("VideoPlaybackQuality")}} 对象。</dd> + <dt>{{domxref("AudioTrack.sourceBuffer")}}, {{domxref("VideoTrack.sourceBuffer")}}, {{domxref("TextTrack.sourceBuffer")}}</dt> + <dd>返回创建了相关轨道的 {{domxref("SourceBuffer")}}。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">附注</th> + </tr> + <tr> + <td>{{SpecName('Media Source Extensions')}}</td> + <td>{{Spec2('Media Source Extensions')}}</td> + <td><span class="short_text" id="result_box" lang="zh-CN"><span>初始定义。</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本支持</td> + <td>23</td> + <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("42.0")}}</td> + <td>11<sup>[2]</sup></td> + <td>15</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>4.4.4</td> + <td> + <p>{{CompatNo}}</p> + </td> + <td>{{CompatNo}}</td> + <td>11</td> + <td>30</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 在将 <code>about:config </code>中的首选项 <code>media.mediasource.enabled</code> 切换到 <code>true</code> 后才可支持。此外，这一版本的 Firefox 仅支持白名单内的网站，例如 YouTube、Netflix 以及其他流行的流媒体网站。此白名单在 Firefox 42+ 被移除，媒体源扩展默认被启用，且支持所有网站。</p> + +<p>[2] 只针对 Windows 8+。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Media_Source_Extensions_API/Transcoding_assets_for_MSE">媒体源扩展的音视频资源转码</a></li> + <li>用 MSE 创建基础的流服务（待定）</li> + <li>用 MPEG DASH 创建流应用（待定）</li> + <li>{{htmlelement("audio")}} 和 {{htmlelement("video")}} 元素。</li> + <li>{{domxref("HTMLMediaElement")}}、{{domxref("HTMLVideoElement")}}、{{domxref("HTMLAudioElement")}}。</li> +</ul> + +<div class="itanywhere-activator" style="left: 47px; top: 1258px; display: none;" title="Google Translator Anywhere"> </div> |