HTML5视音频处理、画布

视频处理 video

---

插入video

在HTML5中我们可以使用video标签在网页中插入视频：
<video src="路径"></video>

考虑到浏览器兼容性问题，我们可以使用source标签来解决：

 <vedio>
         <source src="视频格式1"/>
         <source src="视频格式2"/>
         <source src="视频格式3"/>
 </vedio>

video元素属性

  src - 视频路径
  autoplay - 自动播放
  controls属性 - 提供视频播放的控制面板，只有属性名，没有属性值
  loop - 视频的循环播放
  poster属性 - 在视频播放之前，显示一张图片
  width/height - 设置显示视频的宽度和高度
  preload - 预加载
     auto-(默认值)自动加载
     none-不加载
     metadata-只加载视频的基本信息(不含视频)

视频处理高级内容

1. 方法:

play() - 播放视频
pause() - 暂停视频
load() - 重新加载音频/视频元素
canPlayType() - 判断当前浏览器是否支持指定视频格式 

2. 事件

   onplay - 当视频开始播放时调用
  onpause - 当视频暂停
  onended - 当视频结束时被触发
  onerror - 当视频错误时被触发
  oncanplay - 当整个媒体可以顺利播放时，就会触发这个事件
  oncanplaythrough - 不考虑整体状态，只要下载了一定的可放帧会会触发这个事件
  onprogress - 用于更新媒体的下载进度，会周期性的触发

3. 属性

    paused - 表示判断当前是否暂停，true表示暂停
    ended - 表示判断当前视频是否播放完毕，true表示播放完毕
    duration - 表示当前视频的时长,单位为s
    currentTime - 表示当前视频播放的位置
   

---

音频处理 audio

---

插入audio

<audio src="音频文件路径"></audio>

考虑到浏览器兼容性问题，我们同样可以使用source标签来解决：

 <audio>
         <source src="音频格式1"/>
         <source src="音频格式2"/>
         <source src="音频格式3"/>
 </audio>

audio的元素属性、方法、事件跟video类似，在此就不重复写了。

---

画布 canvas

---

什么是canvas

 1. HTML5提供的新元素
 2. Canvas在HTML页面提供画布的功能,可以在页面中绘制各种图形
 3. canvas绘制的图形与HTML页面无关,无法通过DOM获取绘制的图形,无法为绘制的推行绑定DOM事件
 4. 只能使用canvas提供的API
 5. 主要用途:
          在HTML页面中绘制图标(例如柱状图、饼状图等)
          网页游戏 - Flash技术
          使用HTML5中的canvas

怎么用canvas

1. 在HTML页面中定义<canvas>元素
      <canvas id="canv"></canvas>

2. 获取<canvas>元素
      var canvas=document.getElementById('canv')

3. 获取画布对象
      var painter=canvas.getContext("2d");
      //参数类型是string类型参数必须是“2d”或“3d”(固定写法)

4. 使用Canvas提供的API
      painter.fileRect(10,10,100,100);
      //painter.fiRect(x,y,width,height)
      //其中：x，y分别是相对于canvas的横、纵坐标，width、height是画布对象painter的宽和高

上面说只能使用canvas提供的API画图，那么canvas常用的API有哪些呢？

  1）绘制实心矩形
  
     fillRect(x,y,width,heigth)
  
  2）绘制空心矩形

     strokeRect(x,y,width,heigth)

  3）清除指定区域的像素，类似于橡皮擦

     clearRect(x,y,width,height)

怎么设置画布对象的颜色呢？

  1）声明形状线条的颜色
     strokeStyle

  2）声明形状内部区域的颜色
     fillStyle

  3）透明度属性。可以设置画布上图形的透明度
     globalAlpha

举例：在canvas画一个颜色为red的实心矩形

 这是错误的
 painter.fileRect(10,10,100,100);     
 painter.fileStyle="red";              

 这是才是正确
 painter.fileStyle="red";
 painter.fileRect(10,10,100,100);       

注意：我们要设置画布对象的颜色等属性时候，一定要在canvas中画图之前，！！！一定要在canvas中画图之前！！！，一定要在canvas中画图之前！！！