Title

test

# HTML5 video 相關 #

## 特性 ##
HTML `<video>` 元素用於在HTML或者XHTML文檔中嵌入視頻內容。
HTML5之前，網頁還未有展示視頻的相關標準，視頻只能使用插件（比如flash）來實現網頁中的播放。HTML5的`<video>`標籤為網頁插入視頻提供了官方標準。

    <video src="movie.mp4">
		Your Browser does not support the video tag.
	</video>

具体参见[这里](http://www.w3schools.com/html/html5_video.asp)。

## 能怎樣 ##

### 主要属性 ###
- **autoplay** —— 如果系统允许，视频缓冲至可播放时自动播放。

		<video src="movie.mp4" autoplay>...</video>

- **controls** —— Gecko提供用户控制。理论上包括暂停/播放按钮、进度条、音量控制、全屏按钮，具体因浏览器而异。

		<video src="movie.mp4" controls>...</video>

- **loop** —— 自动重播。

		<video src="movie.mp4" loop>...</video>

- **muted** —— 视频默认静音。

		<video src="movie.mp4" muted>...</video>

- **poster** —— 视频默认图片，也就是视频的封面。

		<video src="movie.mp4" poster="images/cover.png">...</video>

- **preload** —— 设置视频预加载状态。三种值：

		<video src="movie.mp4" preload="metadata">...</video>

	- `none`：不执行任何的预加载。
	- `metadata`：只加载视频的元数据，例如持续时间。
	- `auto`：需要视频预加载，使用浏览器默认定义。

	> 备注：
	> 
	> - autoplay属性优先于preload。
	> - 规范没有强制浏览器遵循该属性的值；设置仅作为提示。

- **webkit-displayinline** —— 播放时不弹出播放器，在网页中直接播放。

		<video src="movie.mp4" webkit-displayinline="true">...</video>

### `source`标签 ###

为同一个视频指定不同的源。当浏览器试图播放视频时，它会逐一核查视频来源列表，直到找到可以播放的视频。`video`中的`src`属性会覆盖`source`中的所有`src`属性。

	<video>
	   <source src="myVideo.mp4" type="video/mp4">
	   <source src="myVideo.webm" type="video/webm">
	</video>

#### `source`标签属性 ####

- `src`：视频源的URL地址
- `type`：视频源类型，如video/mp4或者video/webm等。实际使用的编码解码器也可以在这个字符串中指定。
- `media`：视频的预期媒体类型，与CSS3 Media Queries类似，能为不同终端指定不同的视频（例如为小尺寸设备指定尺寸更小、分辨率更低的视频）。

### `track`标签 ###

	<video src="foo.ogg">
	  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
	  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
	</video>

为视频制定一个或多个字幕。

### Events and API ###

[w3 demo](http://www.w3.org/2010/05/video/mediaevents.html)

- stalled
- ended
- play
- readyState
- progress
- buffered（[模拟进度条](http://stackoverflow.com/questions/5029519/html5-video-percentage-loaded)）
- seekable
- [currentTime](http://www.w3schools.com/tags/av_prop_currenttime.asp)（[通过currentTime判断视频是否开始播放](http://stackoverflow.com/questions/6877403/how-to-tell-if-a-video-element-is-currently-playing)）


## 兼容問題 ##

iOS下音量只能通过物理键控制。

安卓播放器层级无解。

## 奇怪的需求 ##

使用canvas绘制视频。

## 未解之謎 ##

视频填充模式。[自适应视频背景](http://benkaminski.com/2013/05/26/responsive-html5-css3-video-background-in-div-no-javascript/)

安卓的层级。

## 參考 ##
- [W3C - HTML5 Video](http://www.w3schools.com/html/html5_video.asp)
- [MDN `<video>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video)
- [W3 - HTML5 Video Events and API](http://www.w3.org/2010/05/video/mediaevents.html)
- [Adobe开发者中心 - HTML5多媒体组件的使用——第一部分：视频](http://www.adobe.com/cn/devnet/html5/articles/html5-multimedia-pt1.html)
- [Adobe开发者中心 - HTML5多媒体组件的使用——第三部分：自定义控件](http://www.adobe.com/cn/devnet/html5/articles/html5-multimedia-pt3.html)
- [Media buffering, seeking, and time ranges](https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/buffering_seeking_time_ranges)
- [HTML5 Video - Percentage Loaded?](http://stackoverflow.com/questions/5029519/html5-video-percentage-loaded)
- [Responsive HTML5/CSS3 Video Background in div. No Javascript Needed!](http://benkaminski.com/2013/05/26/responsive-html5-css3-video-background-in-div-no-javascript/)