html 嵌入html5播放器

文章引用地址：[url]http://www.iefans.net/html5-qianru-shipin/[/url] 作者：iefans
<video>标记

HTML5 在嵌入视频时本质上归结为使用一个标记：<video>。但正如其他 HTML 标记一样，有很多参数选项。以下是标记本身中的一些要点：

src：视频源的位置和名称，它的工作原理与 <img> 标记的 src 参数相同。但是要注意，在这里不是识别视频源，您可以并且也应该在标记外部识别（参见下文）。

<video id="sampleMovie" src="HTML5Sample.mov"></video>

width和height：（可选）视频的尺寸。更准确地说，这是视频帧宽度和高度，而不是视频本身。与 <img> 相似，省去此选项将导致浏览器使用视频源的默认尺寸。但是与 <img> 不同的是，使用与源不同的大小将缩放视频，而不是扭曲它。换句话说，嵌入的视频将保留其源的比率。如果您指定的大小小于源，整个视频将会缩小。但是，如果您指定的大小大于源，视频将以其原始大小显示，所指定尺寸的其余部分将使用空白区域填充。

<video id="sampleMovie" src="HTML5Sample.mov" width=”640” height=”360”></video>

controls：添加默认视频控件覆盖。如果您不想创建自己的自定义控件，这是非常有用的。但是，如果想深入研究自定义播放器控件，可以使用 JavaScript 和 CSS。该规范允许操作 play ()、pause()、currentTime、volume、muted 等方法和属性。

<video id="sampleMovie" src="HTML5Sample.mov" controls></video>

preload：只要用户点击页面就开始下载视频。要指示预加载视频，只需包括该属性。要指示其不预加载，将该属性设置为等于"none"。

<video id="sampleMovie" src="HTML5Sample.mov" preload></video>

<video id="sampleMovie" src="HTML5Sample.mov" preload=”none”></video>

autoplay：流氓参数。该参数指示浏览器加载页面时就播放视频。不要使用它。

<video id="sampleMovie" src="HTML5Sample.mov" autoplay></video>

接下来是见证奇迹的时刻。HTML5 规范包括一个方便的古怪功能，可以弥补当前围绕视频格式所发生的浏览器功能障碍。不使用 src 属性指定视频源，您可以在<video> 标记中嵌套多个标记，每个都有不同的视频源。浏览器将自动浏览列表并选择第一个能够播放的视频。例如：

<video id="sampleMovie" width="640" height="360" preload controls>

<source src="HTML5Sample_H264.mov" />

<source src="HTML5Sample_Ogg.ogv" />

<source src="HTML5Sample_WebM.webm" />

</video>

如果在 Chrome 中测试该代码，将获得 H.264 视频。但是在 Firefox 中运行它，会在相同的地方看到 Ogg 视频。

理想情况下，虽然不是所有浏览器都绝对需要，您应该在 type 参数中包括 MIME 类型，确保与所有的浏览器兼容。此参数应指定视频类型，以及视频和音频编解码器。参数的细节取决于视频的编码方式。在这里可以找到很多可能的方案：http://wiki.whatwg.org/wiki/Video_type_parameters。

<video id="sampleMovie" width="640" height="360" preload controls>

<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />

<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />

</video>

有关正在使用的所有三种视频类型的示例，请访问我的站点。

在此页面上，您会看到三个不同视频的源代码：H.264、Ogg 和 WebPM。视频本身标有它们的编解码器，以便您查看浏览器中显示的内容。

关于 MIME 类型的一个小窍门：您的服务器需要配置为可识别各种类型。对于 Windows Server，这意味着将不同的 MIME 类型项添加到 IIS。对于 Apache 服务器，您需要将 AddType 指令添加到 httpd.conf 或本地 .htaccess 文件中：

AddType video/ogg .ogv

AddType video/mp4 .mp4

AddType video/webm .webm

优雅降级

虽然完整的多源 <video> 标记可在多个 HTML5 就绪的浏览器上工作，但它仍然没有解决旧的、HTML5 之前的浏览器问题。幸运的是，该规范包括一个向下兼容机制。

将目前正在使用的任何<object> 标记，或者将使用的 HTML5 之前的标记，添加到 <source> 参数列表的底部。通常情况下，此对象将指定您使用的播放器（假定是第三方插件），以及该播放器的参数和源。下例使用流行的免费第三方播放器 Flowplayer。

<video id="sampleMovie" width="640" height="360" preload controls>

<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />

<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />

<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">

<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />

<param name="allowFullScreen" value="true" />

<param name="wmode" value="transparent" />

<param name="flashvars" value='config={"clip":{"url":"HTML5Sample_flv.flv","autoPlay":false,"autoBuffering":true}}' />

</object>

</video>