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>
IT文库 » HTML5的新特性–基础知识(3)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址