视频处理
HTML5中的视频，使用video和source搭配，来解决浏览器视频格式兼容问题，如果都不支持，可以在video里面写提示语
<vedio>
<source src="视频格式"/>
<source src="视频格式"/>
<source src="视频格式"/>
</vedio>
video支持的视频格式
MP4 ：目前比较主流
OGG ：多用于移动端
WebM ：目前唯一支持超高清格式，在HTML页面中支持超高清格式HTML5-
vedio元素的属性
src ：视频路径
autoplay ：自动播放
controls ：提供视频播放的控制面板，只有属性名，没有属性值
loop ：视频的循环播放
poster ：在视频播放之前，显示一张图片
width/height ：设置显示视频的宽度和高度preload ：预加载 auto：(默认值)自动加载 none：不加载 metadata：只加载视频的基本信息(不含视频)
视频处理进阶
- 方法
play() ：播放视频
pause() ：暂停视频
load() ：重新加载音频/视频元素
canPlayType() ：判断当前浏览器是否支持指定视频格式 - 事件
onplay ：当视频开始播放时调用
onpause ：当视频开始
onended ：当视频结束时被触发
onerror ：当视频错误时被触发
oncanplay ：当整个媒体可以顺利播放时，就会触发这个事件
oncanplaythrough ：不考虑整体状态，只要下载了一定的可放帧会会触发这个事件
onprogress ：用于更新媒体的下载进度，会周期性的触发 - 属性
paused ：表示判断当前是否暂停，true表示暂停
ended ：表示判断当前视频是否播放完毕，true表示播放完毕
duration ：表示当前视频的时长,单位为s
currentTime ：表示当前视频播放的位置
音频处理
音频处理和视频处理基本上都相同，音频处理使用audio和source搭配
<audio>
<source src="音频格式">
<source src="音频格式">
<source src="音频格式">
</audio>
audio支持的音频格式有MP3/OGG/WAV
画布处理
如何使用画布？
1. 在html里创建canvas标签
如果使用内联样式或者样式表改变canvas的宽和高，都会拉伸或者压缩里面的图形
使用canvas的宽高属性一切正常
<canvas width="500px" height="500px"></canvas>
2. 获取<canvas>元素
var canvas = document.getElementsByTagName('canvas')[0];
3. 获取到画布对象,可以理解为画笔，参数是字符串，而且字母必须是小写
var context = canvas.getContext("2d");
4. 使用canvas的API作图，x,y,width,height, x y设置位置，width height设置宽高，位置相对于canvas
context.fileRect(10,10,100,100);常见的canvas的API
1. 绘制实心矩形
fillRect(x,y,width,heigth);
2. 绘制空心矩形
strokeRect(x,y,width,heigth);
3. 清除指定区域的像素，类似于橡皮擦
clearRect(x,y,width,height);-
设置颜色和透明度：如果在创建图像时，没有指定颜色，那么所有图形都会使用纯黑色。在绘制之前设置颜色和透明度，绘制之后再设置是无效的。
图形的透明度：context.globalAlpha = 0.3; 图形内部区域的颜色：context.fillStyle = "blue"; 图形线条的颜色：context.strokeStyle = "green";
