12.14-HTML5表单新验证状态和视频处理

HTML5表单新验证状态

validityState

1. valueMissing:判断当前元素值是否为空，配合required使用

   返回true代表该元素值为空
   返回false代表该元素值不为空

2.typemismatch:判断当前元素值的类型是否匹配，配合email/number/url等属性使用

3.patternMismatch：判断当前元素值是否匹配正则表达式，配合pattern属性使用

  返回true - 表示验证成功
  返回false - 表示验证失败

4.tooLong：判断当前元素值的长度是否正确，配合maxlength属性使用

5.rangeUnderflow:判断当前元素值是否小于min属性值，配合min

6.stepMismatch：判断当前元素值是否与step设置相同，匹配step属性，并不与min和max属性值比较

7.valid:判断当前元素是否正确

  返回true - 表示验证成功
  返回false - 表示验证失败

8.customError:配合setCustomValidity()方法使用

    setCustomValidity()--设置自定义的错误提示内容

   使用此方法会产生两个bug:

       让所有验证都不通过，但并不会影响验证状态的值

       无论验证是否正确都有错误提示

视频内容-基本内容

1. flash介绍

   1）使用Flash技术处理HTML页面中的视频内容，也可以处理音频、动画、网页游戏等

   2）Flash的特点

   浏览器原生不支持(IE浏览器要求安装ActiveX组件)
   性能不好(不能过多的使用)
   智能移动端使用Flash技术播放视频比较麻烦
   Flash的母公司Adobe公开宣布放弃

3）目前用于替代Flash技术最好的选择-HTML5

几乎所有浏览器原生支持video元素
性能更高
智能移动端支持非常好

2. 使用HTML实现视频处理
   

        您的浏览器不支持播放该视频
        
        
        
   
        <-- src      视频路径
         autoplay    自动播放
         controls    提供视频播放的控制面板，无属性值
         loop        循环播放视频
         poster      在视频播放前，显示一张图片
         width/height 设置显示视频的宽度和高度
         preload     预加载
             1)auto （默认值）自动加载
             2)none  不加载
             3)metadata 只加载视频的基本信息（不含视频）-->
    
   

视频处理- 高级内容

1. 方法

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

2. 事件

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

3. 属性

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

音频处理

      
      参考video

Canvas(画布) - 简单内容

1. HTML5提供的新元素

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

3. canvas绘制的图形与HTML页面无关

   • 无法通过DOM获取绘制的图形

   • 无法为绘制的推行绑定DOM事件

4. 只能使用canvas提供的API

5. 主要用途

   • 在HTML页面中绘制图标(例如柱状图、饼状图等)

   • 网页游戏 - Flash技术

6. 如何使用canvas

   1）在HTML页面中定义canvas元素

   • 默认宽度 300*150

   • 效果上类似于div

   • 问题：

     • 定义canvas元素的宽度和高度

     • style设置-绘制图形被拉伸

     • 属性方式 - 没有任何问题

   2）获取canvas元素

   3）获取画布对象

        getContext("2d");
   

   参数类型是string类型，参数必须是“2d”或“3d”(目前支持2d,不可大写)

   4）使用Canvas提供的API

        context.fileRect(10,10,100,100);
   

Canvas(画布) - 高级内容

1.绘制实心矩形

 fillRect(x,y,width,heigth)

2.绘制空心矩形

 strokeRect(x,y,width,heigth)

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

 clearRect(x,y,width,height)

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

• 声明形状线条的颜色::strokeStyle

• 声明形状内部区域的颜色::fillStyle

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