HTML5（video属性方法以及事件&canvas&缓存）
video
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则用户显示控件，比如播放按钮 |
| height | pixels | 设置视频播放器的高度 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放 |
| muted | muted | 如果出现该属性，视频的音频输出为静音 |
| poster | URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮 |
| preload | auto metadata none | 如果出现该属性，则视频在页面加载时进行加载，并与被播放，如果使用“autoplay ”则忽略该属性 |
| src | URL | 要播放的视频为URL |
| width | pixels | 设置视频播放器的宽度 |
远程地址火狐不能识别，谷歌可以
html代码写法：
获取video对象
var video = document.querySelector("#vid");
video.currentTime = value; //当前播放的位置（总时间），赋值可改变位置（时间）
video.startTime;//一般为0，如果为流媒体或者不从0开始的资源，则不为0
video.duration; //总时间
video.paused; //是否暂停
video.defaultPlaybackRate = value;//默认的播放速度，不可以设置
video.playbackRate = value;//当前播放速度，设置后马上改变
video.ended; //是否结束
video.autoPlay; //是否自动播放
video.loop; //是否循环播放
video.play(); //播放
video.pause(); //暂停
*** //视频控制 ***
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音（true时为静音）
HTML5 Audio/Video 事件
| 事件 | 描述 |
|---|---|
| abort | 当音频/视频的加载已放弃时 |
| canplay | 当浏览器可以播放音频/视频时 |
| canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时 |
| durationchange | 当音频/视频的时长已更改时 |
| emptied | 当目前的播放列表为空时 |
| ended | 当目前的播放列表已结束时 |
| error | 当在音频/视频加载期间发生错误时 |
| loadeddata | 当浏览器已加载音频/视频的当前帧时 |
| loadedmetadata | 当浏览器已加载音频/视频的元数据时 |
| loadstart | 当浏览器开始查找音频/视频时 |
| pause | 当音频/视频已暂停时 |
| play | 当音频/视频已开始或不再暂停时 |
| playing | 当音频/视频在已因缓冲而暂停或停止后已就绪时 |
| progress | 当浏览器正在下载音频/视频时 |
| ratechange | 当音频/视频的播放速度已更改时 |
| seeked | 当用户已移动/跳跃到音频/视频中的新位置时 |
| seeking | 当用户开始移动/跳跃到音频/视频中的新位置时 |
| stalled | 当浏览器尝试获取媒体数据，但数据不可用时 |
| suspend | 当浏览器刻意不获取媒体数据时 |
| timeupdate | 当目前的播放位置已更改时 |
| volumechange | 当音量已更改时 |
| waiting | 当视频由于需要缓冲下一帧而停止 |
下面是自己用以上述新那个方法以及事件写了一个简单的案例，做了一个控制条
canvas
将canvas转化成2d模型 getcontext
绘制矩形 fillRect(x,y,width,height)
绘制矩形边框 strokeRect(x,y,width,height)
填充样式 fillstyle() （必须在绘制矩形之前）
填充 fill()
绘制矩形的例子
绘制圆 arc(x,y,radius,startAngle，endAnger,anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
弧度=(Math.PI/180)*角度。
绘制线条 move To(x,y);line To(x,y)
填充线条颜色 stokeStyle=“red”;
填充线条：stoke();
设置线条宽度：linewidth；
圆形渐变creatPadialGradient(x1,y1,r1,x2,y2,r2)
createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
addColorstop()参数一：指颜色的过渡范围，最大值是1；参数二：颜色
beginpath();开始路径
closepath();关闭路径，前后不影响
线性渐变：createLinearGradient(x,y,x1,y1);
x:渐变起始点横坐标
y：渐变起始点纵坐标
x1：渐变结束点横坐标
y1：渐变结束点纵坐标
绘制文本：fillText(text,x,y[,maxwidth]);
text:用来填充文本信息；
x：填充文本的起点坐标；
y：填充文本的起点纵坐标；
maxwidth（可选）：填充文本的最大宽度，当文本占据宽度超过此最大宽度时，通过压缩每个文本的宽度进行适合，而非换行；
设置字体大小：font
绘制图片 drawImage(image,x,y)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
清楚区域 clearRect(x,y,width,height)类似橡皮擦
缓存
localStorage 本地缓存 缓存内存
sessionStorage 浏览器缓存 关闭浏览器之后消失
cookie
cookie存值
cookie优点 有有效期 设置当前页面的访问权限
cookie 存的太少 2kb