HTML5的新特性--基础知识（3）

1. setCustomValidity()

    1.1 作用

        自定义错误信息，一旦设置好了setCustomValidity()，当前表单是不允许被提交的，一旦提交，显示自定义错误信息

    1.2 注意

        setCustomValidity("")，一旦数据被修改正确后，需要通过setCustomValidity("")清空错误验证消息，使得表单允许被提交

 2.checkValidity()

    2.1作用

       在不提交表单的情况下对表单或者表单元素进行验证。如果有问题的话，返回值为false；如果没有问题，返回值为true。

 3. invalid事件

    表单在提交过程中，检测到有无效域时，所激发的事件。该事件的本质是获取产生错误的那一组元素。

    3.1如何使用

       document.forms[0].addEventListener("invalid",form_invalid,true);

       function form_invalid(e){

         var elem=e.target;//得到产生错误的元素

        //调整elem

       }

 4.ValidateState状态

    表示指定的表单元素能够出现的所有的错误状态

    4.1如何获取validateState

       formElement.validity;

    4.2错误状态值

       1、判断是否通过所有的验证规则

         formElement.validity.valid:通过所有的验证后，返回值为true，否则为false。与checkValidity()类似

       2、判断是否为空

         formElement.validity.valueMissing

         注意：验证有required属性的控件，值是否为空。值为空，返回true。否则为false

       3、判断数据是否违反类型

         formElement.validity.typeMismatch

         看输入的数据，与type属性是否相等，如果不符返回为true，否则返回false

       4、判断数据是否违反pattern属性的约束

          formElement.validity.patternMismatch

          违反为true，否则为false

       5、判断数据是否违反了定义的step，多数使用在<input type=number />类型上

           formElement.validity.stepMismatch

           违反为true，否则为false

       6、输入的数据长度超出了maxlength所定义的长度

          formElement.validity.tooLong

          用于比较位数<input type="text" maxlength="15">

       7、输入的值小于定义的min值

          formElement.validity.rangeUnderflow

       8、输入的值大于定义的max值

          formElement.validity.rangeOverflow

          用于比较大小<input type="number" max="100">

       9、判断表单元素是否已经设置了自定义错误消息

        a)formElement.validity.setCustomValidity("格式不正确")

          formElement.validity.customError;返回值为true

        b)formElement.validity.setCustomValidity("")

          formElement.validity.customError;返回值为false

 新课：

 1、h5之前播放视频

    <embed src="">标签

    <object>标签  实现过程比较麻烦

  如： <object>

         <param />

         <param />

         <param />

       </object>

 2、h5中：使用video元素在文档中插入和播放视频，主要支持ogg和mp4格式

 ogg:包含theora视频和vorbis音频解码器，并且得到火狐、谷歌、opera等的支持

 mp4:采用H.264视频和AAC音频解码器，得到Safari、IE以及谷歌的支持，现在比较流行的视频格式

 video元素：包含source元素，这些元素为浏览器提供了不同的视频源。浏览器会根据source标签，然后根据所支持的格式，选择播放的文件。

 语法：

 写法一：<video src="abc.mp4"></video>   这种方法用的比较多

 写法二：

 <video>

    <source src="abc.swf" />

    <source src="abc.mp4" />

 </video>

 例：

 <video src="source/video.mp4" width="400px" height="300px" controls autoplay loop poster=“source/01.jpg”></video>

 controls属性:显示下方的播放和暂停

 autoplay属性：设置视频加载完成后自动播放

 loop属性：设置这个属性时，浏览器会反复播放该视频

 poster属性：该属性指定一个URL，在视频等待播放时显示一幅图像

 preload属性：该属性可以设置三个值：

     none:不缓存视频，为了减少不必要的流量

     metadata：推荐浏览器抓取一些资源的信息

     auto:默认值，要求浏览器尽可能快的下载视频

 h5中视频或音频事件：

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

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

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

 ended:媒体到达末尾时触发

 pause：媒体暂停时触发

 play：媒体开始播放时触发

 error：媒体播放出现错误时触发

 下面是h5中新增的媒体处理方法：

 play():播放媒体文件

 pause():暂停播放

 load();加载媒体文件，动态应用程序可使用该方法提前加载

 canPlayType(type):查看浏览器是否支持这种文件格式的媒体文件

 canPlayType(type)中：

 视频格式：如video/mp4,video/ogg

 音频格式：如audio/mp3

 例：<video id="media" width="700" src="source/video.mp4"></video>     

       $("media").canPlayType("video/mp4");

 返回值：

   1、probably：最大可能性能够播放该视频

   2、maybe：可能播放该视频

   3、"":空，播放不了

 h5新增的针对视频元素处理属性如下：

 paused:媒体处于暂停或未播放状态，这个值为true

 ended：如果媒体已经播放结束，这个值为true

 duration：返回媒体总时长，以秒为单位

 currentTime：获取或设置媒体播放位置

 编程实现视频播放器：

  step1：实现视图界面

  step2：完成播放/暂停的功能

         play()

         pause()

         按钮文字切换

  step3：

       3.1 完成滚动条的自然滚动

           currentTime:播放的时长

           duration：视频总时长

           maxim:600

           size:待求

          currentTime/duration =size/maxim

          size=currentTime/duration*maxim

       3.2 手动更改滚动条，并且更新视频播放位置

           e.pageX - div.offsetLeft

           e.offsetX;

 音频audio元素：在互联网中，音频不如视频流行。在h5中，通过audio元素来表示音频文件。

 检查音频格式：$("audio").canPlayType("audio/mp3")

 audio元素支持以下属性

 src:指定播放文件的url，可通过<source>

 controls:激活浏览器提供的默认页面

 autoplay：加载音频后自动播放

 loop：设置该属性后，会反复播放该音频

 preload

 H5中的媒体API既支持视频也支持音频。

 案例：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

   <title>  </title>

   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

   <style type="text/css">

     #player{

         width:700px;

         margin:20px auto;

         padding:5px;

         background:#999999;

         border:1px solid #666666;

         border-radius:5px;

     }

     #media{margin:0px;padding:0px;}

     nav{margin:5px 0px;}

     #buttons{float:left;}

     button{

         width:50px;

     }

     #bar{

         float:left;

         width:600px;

         height:16px;

         padding:2px;

         border:1px solid #ccc;

         background:#eee;

         margin-left:25px;

     }

     #progress{

         width:0px;

         height:16px;

         background:rgba(0,0,150,0.2);

     }

   </style>

   <script>

     var loop;

     function $(id){

         return document.getElementById(id);

     }

     /**初始化**/

     function initial(){

         //1、获取 id为btn的元素

         var btn = $("btn");

         var media = $("media"); //获取media

         var bar = $("bar");

         //2、绑定事件

         btn.addEventListener("click",btn_click,false);

         media.addEventListener("ended",media_ended,false);

         bar.addEventListener("click",bar_click,false);

     }

     /**鼠标单击bar时的事件**/

     function bar_click(e){

         //console.log("距离:"+e.offsetX);

         var progress = $("progress");

         progress.style.width = e.offsetX + "px";//设置progress的宽度为鼠标点击的bar的位置宽度

         var media = $("media");

         //计算currentTime

         var currentTime = e.offsetX / 600 * media.duration;

         media.currentTime = currentTime;

     }

     /**视频播放结束后的事件*/

     function media_ended(){

         media.currentTime=0;  //当视频结束后自动将当前事件设置为开始播放

         $("btn").innerHTML = "Play";

         clearInterval(loop);

         $("progress").style.width = "0px";

     }

     /**更新滚动条的位置*/

     function updateStatus(){

         var media = $("media");

         var progress = $("progress");

         var size = media.currentTime / media.duration * 600;

         $("progress").style.width = size + "px";

     }

     /**Play/Pause 按钮单击事件**/

     function btn_click(){

         //1、获取media

         var media = $("media");

         //2、根据不同状态切换视频 播放/暂停

         if(!media.ended && !media.paused){

             //正在播放中，需要暂停视频，按钮的文字变成Play

             media.pause();

             this.innerHTML = "Play";

             clearInterval(loop);

         }else{

             //正在暂停(停止)中，播放视频，按钮的文字变成Pause

             media.play();

             loop = setInterval("updateStatus()",100);

             this.innerHTML = "Pause";

         }

     }

     window.addEventListener("load",initial,false);

   </script>

  </head>

  <body>

     <section id="player">

         <video id="media" width="700" src="video.mp4" autoplay></video>

         <nav>

             <div id="buttons">

                 <button id="btn">Play</button>

             </div>

             <div id="bar">

                 <div id="progress"></div>

             </div>

             <div style="clear:both;"></div>

         </nav>

     </section>

  </body>

 </html>