替代Flash技术最好的选择------HTML5

关键词:视频处理、音频处理、Canvas(画布)
一、视频处理
1、基本内容
1.1、使用HTML实现视频处理:

  1. video标签

     如果当前浏览器不支持video,可以在veido里面编写提示内
     src - 引入视频文件的路径
     autoplay - 自动播放视频
    

2)souce元素

       

1.2、video支持的视频格式

      MP4 - 目前比较主流
      OGG -  多用于移动端
      WebM - 目前唯一支持超高清格式

1.3、video元素的属性

      src - 视频路径
      autoplay - 自动播放
      controls属性 - 提供视频播放的控制面板,只有属性名,没有属性值
      loop - 视频的循环播放
      poster属性 - 在视频播放之前,显示一张图片
      width/height - 设置显示视频的宽度和高度

      preload - 预加载:
           auto-(默认值)自动加载
           none-不加载
           metadata-只加载视频的基本信息(不含视频)

2、高级内容
2.1、 方法

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

2.2、 事件

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

2.3、 属性

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

2.4、 video元素

    当video视频全屏时,浏览器会把video放到最前端,图片是有显示的,但被视频覆盖了

    利用video事件完成广告效果

       bug: 不能全屏

       解决方案:

         等到HTML5更新
         使用video元素提供的高级编程自己实现
         使用目前封装好的video的JS库 video.js

3、代码示例




4、运行结果

替代Flash技术最好的选择------HTML5_第1张图片
Paste_Image.png

二、音频处理

1、 audio元素

    第一种:只支持一种音频格式

      

    第二种: 同时引入多个音频格式

      

2、audio元素支持的音频格式

      MP3 - 目前最主流
      OGG
      WAV 

3、代码示例


三、Canvas(画布)
1、基本内容

1.1、 HTML5提供的新元素
1.2、 Canvas在HTML页面提供画布的功能
可以在页面中绘制各种图形
1.3、 canvas绘制的图形与HTML页面无关
无法通过DOM获取绘制的图形
无法为绘制的推行绑定DOM事件
1.4、 只能使用canvas提供的API

1.5、 主要用途

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

1.6. 如何使用canvas

   1)在HTML页面中定义元素     
      默认宽度 300*150
      效果上类似于div
      问题:
         定义canvas元素的宽度和高度
            style设置-绘制图形被拉伸
            属性方式 - 没有任何问题
   2)获取元素
   3)获取画布对象
       getContext("2d");
       参数类型是string类型,参数必须是“2d”或“3d”(固定写法)
   4)使用Canvas提供的API
       context.fileRect(10,10,100,100);

2、高级内容
1、API提供的工具非常广泛,包括创建图形、颜色、文本等

2、矩形

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

     strokeRect(x,y,width,heigth)

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

     clearRect(x,y,width,height)

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

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

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

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

 HTML5的难度

   HTML5的核心API相对来讲,都不难
   HTML5的案例真正难在逻辑(js代码)
   总结:HTML5离不开js

 第二阶段js,抓紧复习

   个人不建议 - 留级

4、 渐变效果 - canvas支持的渐变效果包括线性渐变或射线渐变,并且支持颜色转折点

  1)在画布上创建一个渐变对象

    var grd = context.createLinearGradient(x1,y1,x2,y2)

      x1,y1 - 基准线的起点坐标值
      x2,y2 - 基准线的终点坐标值

    var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2) 

       x1,y1 - 第一个基准圆的元素坐标值
       r1 - 第一个基准圆的半径

       x2,y2,r2同上

      返回一个渐变对象

  2)给渐变对象指定渐变颜色值
  
     addColorStop(position,color)

     position - 指设置渐变颜色的位置(0-1)

  3) 将渐变对象作为画布对象的颜色

      context.fillStyle = grd;

  4) 绘制矩形

       context.fillRect(0,0,400,400);

5、代码示例

6、运行结果

替代Flash技术最好的选择------HTML5_第2张图片
Paste_Image.png

你可能感兴趣的:(替代Flash技术最好的选择------HTML5)