构建简单的 MPEG-DASH 流媒体播放器

转自:http://msdn.microsoft.com/zh-cn/library/windows/apps/dn551368.aspx


使用媒体源扩展 API 构建 MPEG-DASH 播放器以将文件传输到 HTML5 视频元素。你可以在 MSDN 示例网站上找到示例代码。

入门

W3C 规范中描述的媒体源扩展 (MSE) 将基于缓存的源选项添加到 HTML5 视频,以支持传输。以前,你需要在播放之前下载完整视频文件或使用加载项(如 Silverlight 或 Adobe Flash)流式传输媒体。使用 MSE,无需任何加载项。MediaSource 对象取代文件 URL 作为视频对象上的 src。源缓存被附加到 MediaSource 对象,并填充分段文件中的媒体数据。

分段的文件既可以是一系列小的单个文件,也可以是按顺序下载和播放的一个具有索引节的大文件。如果你的应用可以捕捉小分段,它更易于执行其他任务,例如将广告或其他内容插入视频。

可通过多种方法构建 MPEG-DASH 播放器。我们的方法使用 SegmentList 技术。这意味着我们可从单个在内部分段的 MP4 源文件中下载和播放视频文件。此示例请求、下载和播放以 10 秒的间隔时间划分的小分段视频,而不是下载整个文件。

此处的代码使用媒体源扩展 (MSE) API 和 HTML5 video 元素。因为 MSE 规范仍在变化中并且某些浏览器使用前缀,因此该示例已构建为专门在 Internet Explorer 11 中运行。该示例也仅使用 MSE,因此对于部署,你可能想要为不支持 HTML5 视频和 MSE 的浏览器提供备用方案(例如 Adobe Flash 或 Silverlight)。

MSE 相关快速教程

要使用 MSE API,请执行以下步骤:

  1. 在页面的 HTML 部分中定义 HTML5 video 元素。
  2. 使用 JavaScript 创建 MediaSource 对象。
  3. 使用 createObjectURL 创建虚拟 URL,并将 MediaSource 对象作为源。
  4. 将虚拟 URL 分配到视频元素的 src 属性。
  5. 使用 addSourceBuffer 创建 SourceBuffer,包含你添加的 MIME 类型的视频。
  6. 从媒体文件联机获取视频初始化分段,并使用 appendBuffer 将其添加到 SourceBuffer 中。
  7. 从媒体文件获取视频数据的分段,并使用 appendBuffer 将其附加到 SourceBuffer 中。
  8. 在 video 元素上调用 play 方法。
  9. 重复步骤 7 直到完成。
  10. 清除。

这是使用 MSE 的基本步骤列表。但是,你的播放器需要了解传入的视频文件类型以及分段的开始和结束位置。MPEG-DASH 规范描述了媒体演示描述 (MPD) 文件,以提供有关该视频的信息。

关于示例

我们构建的示例是简单的 MPEG-DASH 播放器。它使用单个文件并从使用 XHR 的文件中检索视频数据的字节范围。它最初检索媒体演示描述文件,并显示它包括的参数。这些参数是“已报告的值”,如下图所示。若要使播放器的格式保持一致,我们针对任何输入使用 CSS 以将视频大小设置为 640x480 像素。如果传入的视频大于 640x480,则缩小;如果小于该像素,则放大。

播放视频时,“当前值”将得到更新。“索引”是当前的分段号(在 segmentList 数组中计算)。“分段长度”是刚刚返回的分段的实际时长。实际分段长度通常与 MPD 文件描述的分段长度不同。“视频时间”是视频文件中正在播放的当前位置。无需显示任何值;我们提供的这些值仅供参考。 在部署的网页上,你可能不会显示大部分值。

若要运行播放器,请参阅联机示例。

媒体演示描述 (MPD) 文件

MPEG-DASH MPD 是 XML 文件,其中包含了播放视频文件所需的所有信息的说明。我们仅使用 MPD 架构中提供的几个功能。该示例在单个文件中检索视频 MIME 类型、宽度和高度、分段持续时间,以及分段偏移(以字节为单位)列表。

我们使用的 MPD 文件是使用 MP4box 命令行实用程序创建的。MP4Box 是 GPAC 的一种开源多媒体打包工具,用于创建 DASH 分段的 MP4 文件和关联的 MPD 文件。若要获取有关 MP4Box 的详细信息并下载二进制文件,请参阅 GPAC MP4Box 或查看 GPAC 通用文档。

若要创建分段的 MP4 文件和关联的 MPD 文件,请先安装 MP4Box。然后,使用以下语法在命令行上调用 MP4Box:

mp4box -dash 10000 -frag 1000 -rap path\yourfile.mp4

MP4Box 使用附加的 _dash 创建两个文件:MP4 文件和 MPD 文件。在此示例中,它使用 10 秒分段和 1 秒片段创建 yourfile_dash.mp4 和 yourfile_dash.mpd -rap 标记告知 MP4Box 在关键帧上或编码序列的开始处尝试创建分段。虽然我们要求创建 10 秒分段,但每个分段的实际持续时间可能不同。我们以后将了解如何处理此问题。 有关 MPD 文件 的详细信息,请参阅 MPEG-DASH 教程。

注意  MPD 文件可以包含任何扩展。例如,如果你从可阻止包含未知扩展名的文件的网站进行发布,你可以将 .mpd 扩展更改为 .xml。我们已执行此操作,以为联机示例解决阻止问题。

HTML5 视频元素

该示例的 HTML 部分非常简单。它包含 video 元素、Input Element 字段、button 和一些用于显示结果的

 区域。该视频元素具有 autoplay 属性集,但不具有 src 或 controls 属性。可以通过我们从 MPD 文件获取的信息设置视频元素源,并使用“播放”按钮完成播放/暂停控制。使用 addEventListener() 而不是元素自身的 onclick() 事件在 JavaScript 代码中处理“播放”按钮的 click 事件。

HTML
<div id="grid">
  <div id="col1">
  <label>Enter .mpd file: 
      <input type="text" id="filename" value="sample_dash.xml" />
    label> <button id="load">Playbutton><br />
         
    
    <div id="mydiv">
      <span id="myspan"><br />This demo requires Internet Explorer 11span>
    div>
    <div id="videoInfo">div>
    <div> div>
    <div id="curInfo"> 
      <h3>Current values:h3>
      <ul>
        <li>Index: <span id="curIndex">span> of <span id="numIndexes">span>li>
        <li>Segment length: <span id="segLength">span>li>
        <li>Video time: <span id="curTime">span>li>
      ul>
    div> 
  div>
  <div id="col2">
    
    <video id="myVideo" autoplay="autoplay" >No video availablevideo>
          <div id="description">
            This example uses HTML5 video, Media Source Extensions, and MPEG-DASH files.<br /> 
            For more info see <a href="http://go.microsoft.com/fwlink/p/?LinkID=390962">Building a simple MPEG-DASH streaming playera>. 
          div>
  div>
div>


在页面的  中,页面的体系结构将 

你可能感兴趣的:(多媒体编程)