向网页中添加 HTML5 视频控件

向网页中添加 HTML5 视频控件

时间 2014-08-05 17:41:17   可乐吧

原文   http://www.k68.org/?p=1754

主题  HTML5

如何开始使用？

采用它的最基本形式，使用 HTML5 video 元素向网页中添加视频播放器是通过一行 HTML 完成的。 添加 controls 特性，且用户可以控制视频播放。其他特性可用于设置源文件、添加占位符图像或自动开始播放视频。与大多数 HTML 元素一样，可以使用层叠样式表 (CSS) 来设置元素的样式和位置。

<video src="demo.mp4" controls autoplay >HTML5 Video is required for this example</video>

src 特性指向要播放的视频文件。src 特性提供为视频元素指定内容的两种方法之一。若要播放视频，请将 src 特性分配给视频文件的 URL。

controls 特性通知浏览器显示内置的播放控件。各个浏览器之间的内置控件在功能和外观方面可能有所不同。但至少，应包含“播放”和“暂停”控件、进度条或快进或快退视频的按钮以及计时器。视频播放时，通常会隐藏这些控件，然后当用户将其鼠标悬停在播放器上时重新显示这些控件。

最后，autoplay 是一个布尔型特性，该特性导致加载视频后开始播放视频。

特性	说明
src	表示指向视频文件的 URL 的字符串。
controls	打开一组内置播放控件的布尔型特性。这通常包括播放、暂停、定位以及设置音量。 Internet Explorer 10 还显示用于选择多个音频和文本曲目的控件。
poster	表示视频播放器中显示的占位符图像的字符串。仅当视频不可用时才显示海报图像，因为此时未设置源或者仍然正在加载内容。
loop	重复重播视频直到按下控件上的暂停按钮或者从脚本调用 pause  方法的布尔型特性。
muted	在关闭音频曲目的情况下播放视频的布尔型特性。
autoplay	在播放器缓冲了足够多的内容之后自动开始播放视频的布尔型特性。
preload	定义需要多少缓冲的提示的布尔型特性。
height	设置视频播放器的高度（以像素为单位）。
width	设置视频播放器的宽度（以像素为单位）。

注意 如果仅设置了视频播放器的一个尺寸，例如高度，则视频播放器将视频大小调整到该尺寸并根据视频内容的纵横比缩放其他尺寸。如果将两个尺寸设置为与视频内容不匹配的纵横比，则播放器缩放最接近的尺寸以适应其尺寸，但会保持其纵横比。 视频将水平或垂直居中，两侧留有空白区域。 下一示例播放视频、在加载内容之前显示海报、使用播放控件重复播放视频。

<video src="demo.mp4" controls autoplay loop muted preload="auto" poster="demo.jpg" > HTML5 Video is required for this example </video>

如何支持多种格式？

视频元素仅允许一次设置一个 src 特性。如果你知道要使用一种文件格式，则可正常工作。但如果希望支持多种文件格式和多种浏览器，则可以使用 source 元素。 source 元素与视频元素结合使用提供“最适合的”视频内容格式。这意味着，可以指定多种格式并且 HTML5 视频播放器选取最适合的一种格式。对于 Windows Internet Explorer，通常是 .mp4 文件，而对于其他浏览器，通常是 .ogg/.ogv 格式。此示例显示具有三种可能文件格式的视频元素：

<video controls poster="demo.jpg"><source src="demo.mp4" type="video/mp4" /><source src="demo.webm" type="video/webm"/><source src="demo.ogv" type="video/ogg"/><p>Fallback code if video isn't supported</p>/ </video>

在此示例中，列出了三种格式，— mp4、webm 和 ogg 视频。根据浏览器的不同，视频元素选择它可以播放的一种格式。如果该示例不能播放任何一种格式，或者不支持 HTML5 视频，则该示例失败并显示 video 标记之间包含的文本。此“回滚”行为可以用于显示消息，或者可以包含嵌入的播放器。

如果需要多浏览器支持，可以借助插件实现。

VideoJS是一个基于JavaScript的HTML5视频播放器,当浏览器不支持时自动切换成Flowplayer播放器。（FlowPlayer 是一个用Flash开发的在Web上的FLV格式的视频播放器，你可以很容易地将它集成在任何的网页上使用。）

网站地址： http://www.videojs.com/ 使用比较简单参考示例即可。

转自： http://msdn.microsoft.com/library/ie/hh924820.aspx