html5 补充 视频，音频,表单

视频和音频

在html5中提供了一个video标签。它允许开发者直接将视频嵌入网页，不需要任何第三方插件（比如 Adobe公司的Flash）就能播放。
video

视频格式
**目前 html5支持三种视频格式mp4, webM, ogg **
video 属性

• autoplay
  布尔值， 指定后，视频会马上自动开始播放，不会停下来等着数据载入结束
  height　width　
  指定播放器的的长宽
  loop
  重复播放，如果出现该属性，则当媒介文件完成播放后再次开始播放。
  muted
  默认静音播放
  poster
  为视频指定海报图像
  preload
  指定预先加载方式，三个可选值
• none 默认值，不加载任何东西
  metadata　预先加载元数据
  auto 预先加载整个视频

兼容浏览器

目前，　浏览器对这三种格式的支持并不统一，　所有我们可以这么写

浏览器会播放支持的第一个视频格式来播放

上面的写法有个问题：对于每个source元素,浏览器会加载所有视频文件的元数据,查看能不能播放这个视频, 这个工程可能很耗费时间

我们可以指定source的type属性来告诉浏览器该视频的视频格式,浏览器根据这个来判断是否能够播放

audio例子

    
11111
    
22222
    
33333
    
44444
    
55555
    
66666
    
77777

html5 表单

新增input类型
新增表单元素
html5表单验证
新增表单属性

新增的input类型
input原有的type属性值

text(普通文本, 默认值)
password(密码框)
radio(单选按钮)
checkbox(多选按钮)
file(文件上传组件)
button(普通按钮)
submit(提交按钮)
hidden(隐藏文本域)

input新增的type属性值

search(搜索框)
email(邮件输入框)
url(url地址输入框)
tel(电话号码输入框)
number(数字输入框)
range(滑动条)
date(日期选择)
month(月份选择)
week(周选择)
time(时间选择)
datetime-local(日期选择)
datetime(包含时区)
color(颜色选择)

示例
search

新增表单元素

datalist
datalist

表单验证

表单验证是指,在用户提交表单之前,确保用户输入是数据是合法的

验证输入类型
验证必填字段
验证字符长度
验证数值范围
验证日期和时间范围
步长
正则表达式
验证输入类型

    
验证输入类型
    
        数字:
        
    
    
        邮箱:
        
    
    
        网址:
        
    

    

验证必填字段

    
验证必填字段
    
        数字:
        
    
    
        邮箱:
        
    
    
        网址:
        
    

    

验证字符长度

    
验证字符长度
    
        密码:
        
    

    

验证数值范围

    
验证数值范围
    
        订购数量:
        
    

    

验证日期和时间范围

    
验证日期和时间范围
    
        送货日期:
        
    
    
        送货时间:
        
    

    

步长

    
步长
    
        订购数量:
        
    

    

正则表达式

    
正则表达式
    
        编号:
        
    

    

禁用表单验证

html5提供的表单验证还是很简陋, 通常不能达到我们的实际需求, 很多时候我们还是需要使用javascript来完成表单验证, 那么我们就需要禁用html5表单验证,以免产生冲突

新增的表单属性

placeholder //输入前的提示信息
autofocus//自动获取焦点
autocomplete//提交成功过的信息，可以自己补全
multiple//可以选择多个
示例

placeholder

autofocus


会在页面加载时自动获取焦点
一个页面只能有一个autofocus属性的定义

autocomplete

    
autocomplete
    
        用户名:
        
    
    

multiple

两种用法

基本用用

    option1
    option2
    option3

type=file