文章目录
- <embed>标签
- <object> 标签
- <video>标签
- <video>浏览器支持
- 视频格式与浏览器的支持
- DOM元素提供的方法、属性和事件
- 兼容多版本的浏览器
- 自定义控制栏
<embed>标签
<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。
前提：浏览器支持 Flash。iPad 和 iPhone 不能显示 Flash 视频。视频不能转成其他格式。
<embed src="movie.swf" height="200" width="200"/>
HTML 代码显示嵌入网页的 Flash 视频。
<object> 标签
<object> 标签的作用是在 HTML 页面中嵌入多媒体元素。
前提：浏览器支持Flash。iPad 和 iPhone 不能显示 Flash 视频。视频不能转成其他格式。
<object data="movie.swf" height="200" width="200"/>
HTML 片段显示嵌入网页的一段 Flash 视频：
<video>标签
<video> 是 HTML 5 中的新标签。<video> 标签的作用是在 HTML 页面中嵌入视频元素。
问题：
- <video> 元素在老式浏览器中无效。
- <video> 元素无法通过 HTML 4 和 XHTML 验证。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>视频</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。
| 标签 | 描述 |
|---|---|
| <video> | 定义一个视频 |
| <source> | 定义多种媒体资源,比如 和 |
| <track> | 定义在媒体播放器文本轨迹 |
<video>浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素。
注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。
视频格式与浏览器的支持
- MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (从 Opera 25 起) | YES | YES |
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
DOM元素提供的方法、属性和事件
| 方法 | 描述 |
|---|---|
| addTextTrack() | 向音频/视频添加新的文本轨道。 |
| canPlayType() | 检测浏览器是否能播放指定的音频/视频类型。 |
| load() | 重新加载音频/视频元素。 |
| play() | 开始播放音频/视频。 |
| pause() | pause() |
| 属性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 |
| autoplay | 设置或返回是否在加载完成后随即播放音频/视频。 |
| buffered | 返回表示音频/视频已缓冲部分的 TimeRanges 对象。 |
| controller | 返回表示音频/视频当前媒体控制器的 MediaController 对象。 |
| controls | 设置或返回音频/视频是否显示控件（比如播放/暂停等）。 |
| crossOrigin | 设置或返回音频/视频的 CORS 设置。 |
| currentSrc | 返回当前音频/视频的 URL。 |
| currentTime | 设置或返回音频/视频中的当前播放位置（以秒计）。 |
| defaultMuted | 设置或返回音频/视频默认是否静音。 |
| defaultPlaybackRate | 设置或返回音频/视频的默认播放速度。 |
| duration | 返回当前音频/视频的长度（以秒计）。 |
| ended | 返回表示音频/视频错误状态的 MediaError 对象。 |
| loop | 设置或返回音频/视频是否应在结束时重新播放。 |
| mediaGroup | 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）。 |
| muted | 设置或返回音频/视频是否静音。 |
| networkState | 返回音频/视频的当前网络状态。 |
| paused | 设置或返回音频/视频是否暂停。 |
| playbackRate | 设置或返回音频/视频播放的速度。 |
| played | 返回表示音频/视频已播放部分的 TimeRanges 对象。 |
| preload | 设置或返回音频/视频是否应该在页面加载后进行加载。 |
| readyState | 返回音频/视频当前的就绪状态。 |
| seekable | 返回表示音频/视频可寻址部分的 TimeRanges 对象。 |
| seeking | 返回用户是否正在音频/视频中进行查找。 |
| src | 设置或返回音频/视频元素的当前来源。 |
| startDate | 返回表示当前时间偏移的 Date 对象。 |
| textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 |
| videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象。 |
| volume | 设置或返回音频/视频的音量。 |
| 事件 | 描述 |
|---|---|
| abort | 当音频/视频的加载已放弃时触发。 |
| canplay | 当浏览器可以开始播放音频/视频时触发。 |
| canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。 |
| durationchange | 当音频/视频的时长已更改时触发。 |
| emptied | 当目前的播放列表为空时触发。 |
| ended | 当目前的播放列表已结束时触发。 |
| error | 当在音频/视频加载期间发生错误时触发。 |
| loadeddata | 当浏览器已加载音频/视频的当前帧时触发。 |
| loadedmetadata | 当浏览器已加载音频/视频的元数据时触发。 |
| loadstart | 当浏览器开始查找音频/视频时触发。 |
| pause | 当音频/视频已暂停时触发。 |
| play | 当音频/视频已开始或不再暂停时触发。 |
| playing | 当音频/视频在因缓冲而暂停或停止后已就绪时触发。 |
| progress | 当浏览器正在下载音频/视频时触发。 |
| ratechange | 当音频/视频的播放速度已更改时触发。 |
| seeked | 当用户已移动/跳跃到音频/视频中的新位置时触发。 |
| seeking | 当用户开始移动/跳跃到音频/视频中的新位置时触发。 |
| stalled | 当浏览器尝试获取媒体数据，但数据不可用时触发。 |
| suspend | 当浏览器刻意不获取媒体数据时触发。 |
| timeupdate | 当目前的播放位置已更改时触发。 |
| volumechange | 当音量已更改时触发。 |
| waiting | 当视频由于需要缓冲下一帧而停止时触发。 |
兼容多版本的浏览器
使用source元素来定义一个以上的媒体元素，一个video元素中可以包含任意数量的source元素，浏览器会加载第一个它支持的source元素引用的文件格式，并忽略其他的来源，无法播放HTML5视频的浏览器则会显示你提供的消息中的备用链接
<video controls="controls">
<source src="my-video.mp4" type="video/mp4" />
<source src="my-video.webm" type="video/webm" />
为旧浏览器输入备用链接或备用文本信息
</video>
自定义控制栏
video播放相关的API：
video.duration：整个媒体文件的播放时长，单位s
video.paused ：如果媒体文件被暂停，则返回true；如果还没开始播放，默认返回true
video.ended ：如果媒体文件播放完毕，则返回true
video.currentTime：以s为单位返回从开始播放到现在所用的时间。在播放过程中，设置currentTime来进行搜索，并定位到媒体文件的特定位置
video.volume ：在0.0到1.0之间设置音频音量的相对值，或者查询当前音量相对值
video.muted ：检测当前是否为静音，是则为true；为文件设置静音或消除静音
video.play() ：播放视频文件
video.pause() ：暂停处于播放状态的视频文件
video.canPlayType() ：测试video元素是否支持给定MIME类型的文件
监听事件：
ontimeupdate ：当video.currentTime发生改变时触发该事件
全屏控制API：
video.webkitRequestFullScreen()：全屏显示
document.webkitCancelFullScreen()：退出全屏
document.webkitIsFullScreen：如果当前处于全屏状态，则返回true,否则返回false
document.addEventListener(‘webkitfullscreenchange’, handler)：当在全屏和非全屏状态切换时，触发该事件
