视频音频处理及Canvas

视频和音频的使用及处理

1.使用video和source搭配来解决视频格式的兼容性问题，如果都不支持，可以在video里面写上提示语

    您的浏览器不支持播放该视频格式

   

   

   

2.video支持的视频格式

      MP4 - 目前比较主流

      OGG -  多用于移动端

      WebM - 目前唯一支持超高清格式

      在HTML页面中支持超高清格式HTML5

3.video元素的属性

      src - 视频路径

      autoplay - 自动播放

      controls属性 - 提供视频播放的控制面板，只有属性名，没有属性值

      loop - 视频的循环播放

      poster属性 - 在视频播放之前，显示一张图片

      width/height - 设置显示视频的宽度和高度

      preload - 预加载

            auto-(默认值)自动加载

            none-不加载

            metadata-只加载视频的基本信息(不含视频)

      paused - 表示判断当前是否暂停，true表示暂停

      ended - 表示判断当前视频是否播放完毕，true表示播放完毕

      duration - 表示当前视频的时长,单位为s

      currentTime - 表示当前视频播放的位置

4.video元素的方法

      play() - 播放视频

      pause() - 暂停视频

      load() - 重新加载音频/视频元素

      canPlayType() - 判断当前浏览器是否支持指定视频格式

5.video元素的事件

      onplay - 当视频开始播放时调用

      onpause - 当视频开始

      onended - 当视频结束时被触发

      onerror - 当视频错误时被触发

      oncanplay - 当整个媒体可以顺利播放时，就会触发这个事件

      oncanplaythrough - 不考虑整体状态，只要下载了一定的可放帧会会触发这个事件

      onprogress - 用于更新媒体的下载进度，会周期性的触发

注意！！！

      当video视频全屏时，浏览器会把video放到最前端，图片是有显示的，但被视频覆盖了，利用video事件完成广告效果

      bug: 不能全屏

      解决方案：

            等到HTML5更新

            使用video元素提供的高级编程自己实现

            使用目前封装好的video的JS库 video.js

6.音频是audio，使用方法参照video

   audio元素支持的音频格式：MP3 - 目前最主流，OGG，WAV

Canvas(画布)

1、 HTML5提供的新元素

2、 Canvas在HTML页面提供画布的功能，可以在页面中绘制各种图形 

 3、 canvas绘制的图形与HTML页面无关，无法通过DOM获取绘制的图形，无法为绘制的推行绑定DOM事件  

 4、 只能使用canvas提供的API 

 5、 主要用途      在HTML页面中绘制图标(例如柱状图、饼状图等)      网页游戏 - Flash技术          使用HTML5中的canvas

 6. 如何使用canvas

   1）在HTML页面中定义元素   默认宽度 300*150   效果上类似于div          

        问题：如果使用内联样式或者样式表改变canvas的宽高属性，都会拉伸或者压缩里面的图形，使用canvas的宽高属性没问题 

    2）获取元素

    3）获取画布对象，context可以理解为画笔，getContext("2d");参数类型是string类型，参数必须是“2d”或“3d”(固定写法)，字母必须是小写

    4）使用canvas的API作图，设置位置：x,y 设置大小：width,height，位置是相对于canvas，context.fileRect(10,10,100,100);

7.矩形

    1）绘制实心矩形

          fillRect(x,y,width,heigth)

    2）绘制空心矩形

          strokeRect(x,y,width,heigth)

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

          clearRect(x,y,width,height)

8. 设置颜色 - 如果在创建图像时，没有指定颜色，那么所有图形都会使用纯黑色

  注意：设置绘制内容的属性，要在绘制之前设置好，绘制之后无效

    1）声明形状线条的颜色

          strokeStyle

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

          fillStyle

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

          globalAlpha