High performance video for mobile

High performance video for mobile

#High performance video for mobile
`<video>`的详细信息：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

`<video>` 与 `</video>` 之间的内容会在浏览器无法显示视频时显示出来
例如
```
<video autoplay controls src="video/bunny.webm">
  <p>Sorry! Your browser doesn't support the video element.</p>
</video>
```

##time fragments
```
<video autoplay controls src="video/bunny.webm#t=25,26">
  <p>Sorry! Your browser doesn't support the video element.</p>
</video>
```
`src` 后面的#t=25,26用来设定开始时间和结束时间（到结束时间后视频会自动暂停）
`controls`允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
`autoplay`指定后，视频会马上自动开始播放，不会停下来等着数据载入结束。

##视频格式
MP4 和 WebM 是 container formats. 有点像是 .zip 文件，包含 audio 和 video 部分。

```
<video autoplay controls>
  <source src="video/bunny.webm" type="video/webm" />
  <source src="video/bunny.mp4" type="video/mp4" />
  <p>Sorry! Your browser doesn't support the video element.</p>
</video>
```
通过 `<source>` 标签让浏览器选择支持的格式，`type` 属性可以让浏览器不需要下载一部分视频文件来判断格式。
`console.log(videoElement.currentSrc);` 可以得知使用的是哪个源。

```
var videoElement = document.querySelector('video');

console.log('fubar', videoElement.canPlayType('fubar'));
console.log('webm', videoElement.canPlayType('video/webm'));
console.log('webm/vp8', videoElement.canPlayType('video/webm; codecs="vp8"'));
```
通过 `canPlayType()` 可以让浏览器告诉我们是否支持这个格式。
有很多因素会影响浏览器能否播放一个特定格式的视频，所以浏览器可能不能给出一个确切的答案，可能会有 `maybe`  或者 `probably` 。如果返回结果为空则为不支持。

##视频高宽
```
video {
  width: 640px;
  max-width: 100%;
}
```
不要指定高度，浏览器会自动设定高度来保持高宽比。

 > Note: the video never overflows its container

##封面
`<video autoplay controls  poster="images/poster.jpg">`
一个海报帧的URL，用于在用户播放或者跳帧之前展示。如果属性未指定，那么在第一帧可用之前什么都不会展示；之后第一帧就像海报帧一样展示。
不和autoplay一起使用

##track
`<track label="Descriptions" src="tracks/track.vtt" />`可以添加字幕文件，`description` 为字幕的名称
`<track>`的 MDN 介绍：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track

无法通过 file:// 网址使用跟踪元素。要查看有效跟踪，将文件放到网络服务器上。

```
WEBVTT FILE

railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth

manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
```
track 文件中的每一项被称作 cue。选择性的，cues可以有自己的ID，例如 railroad 和 manuscript。Cues 之间由空行分隔
Cue 的时间格式是 hours:minutes:seconds.milliseconds。 解析很严格. hours, minutes, seconds 都必须有两个数字，milliseconds 必须有三个数字。
[WebVTT Validator](https://quuz.org/webvtt/)：一个检查时间格式错误，以及时间不连续等问题的网站：

可以使用JavaScript来获取或者设置文本，监听 cue changes 事件。
```
'use strict';

var videoElement = document.querySelector('video');
var textTrack = videoElement.textTracks[0]; // there's only one!

var data = document.getElementById('data');
textTrack.oncuechange = function() {
  // 'this' is a textTrack
  var cue = this.activeCues[0]; // assuming there is only one active cue
  if (cue) {
    data.innerHTML = cue.startTime + '-' + cue.endTime + ': ' + cue.text +
      '<br />' + data.innerHTML;
    //  var obj = JSON.parse(cue.text); // cues can be data too :)
  }
};
```

更多内容：
http://www.html5rocks.com/en/tutorials/track/basics/

##adaptive streaming

###MSE
###DASH: Dynamic Adaptive Streaming over HTTPS
###Shaka Player

>https://codelabs.developers.google.com/codelabs/adaptive-web-media/index.html?index=..%2F..%2Findex#7