html5学习 - video

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式

当前，video 元素支持三种视频格式：

格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG 49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+NoOgg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。

实例1：

<video width="320" height="240" controls="controls">  <source src="movie.ogg" type="video/ogg">  <source src="movie.mp4" type="video/mp4">  Your browser does not support the video tag</video>

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

实例2：兼容ie

<video width="420"  controls="controls">    <source src="http://www.w3schools.com/example/html5/mov_bbb.mp4" type="video/mp4">    <source src="http://www.w3schools.com/example/html5/mov_bbb.ogg" type="video/ogg">    <object width="420" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">        <param name="AutoStart" value="1" />        <param name="FileName" value="http://www.w3schools.com/example/html5/mov_bbb.mp4" />    </object></video>

<video> 标签的属性

属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放、暂停和音量控件。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。

HTML5 <video> - 方法、属性以及事件

下面列出了大多数浏览器支持的视频方法、属性和事件：

方法属性事件play()currentSrcplaypause()currentTimepauseload()videoWidthprogresscanPlayTypevideoHeighterror
durationtimeupdate
endedended
errorabort
pausedempty
mutedemptied
seekingwaiting
volumeloadedmetadata
height

width

注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。