HTML5视频、音频和画布

视频处理

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";