二、HTML5视频、音频播放事件属性与API控件
1、video、audio标签
<video src = "movie.mp4" controls = "controls"><video>
或者<video controls = "controls">
<source src = "movie.mp4">
<video>
属性 |
值 |
描述 |
autoplay |
autoplay(可省略) |
视频自动播放 |
controls |
controls(可省略) |
向用户显示播放控件 |
width |
px |
播放器宽度 |
height |
px |
播放器高度 |
loop |
loop、数字 |
播放完是否继续播放、播放次数 |
preload |
proload |
是否等待加载完再播放 |
src |
url |
视频url地址 |
poster |
imgurl |
加载等待的画面图片 |
autobuffer |
autobuffer |
设置为浏览器缓冲方式,不设置autoplay时有效 |
2、HTML5视频API 控件
(1)获得video标签
①通过DOM对象 var video = document.getElementById("videoID");
②通过jQuery 的方法 var video = $("#videoID")[0];
video标签的属性
载入视频:load()
播放视频:play()
暂停:pause()
快进10秒:currentTime +=10
播放速度增加:playbackRate ++
播放速度增加0.1:playbackRate += 0.1
音量增加:volume += 0.1
静音:muted = true
(3)事件
canplay
duration 媒体长度
timeupdate 媒体当前位置
三、表单
1、表单输入类型
类型 |
使用示例 |
含义 |
<input type="email"> |
输入邮箱格式 |
|
tel |
<input type="tel"> |
输入手机号码格式 |
url |
<input type="url"> |
输入url格式 |
number |
<input type="number"> |
输入数字格式 |
search |
<input type="search"> |
搜索框(体现语义化) |
range |
<input type="range"> |
自由拖动滑块 |
color |
<input type="color"> |
拾色器 |
time |
<input type="time"> |
小时 |
date |
<input type="date"> |
年月日 |
datetime |
<input type="datetime"> |
时间输入框 |
month |
<input type="month"> |
年月 |
week |
<input type="week"> |
年周 |
2、表单元素
元素 |
含义 |
<datalist> |
数据列表 |
<keygen> |
生成加密字符串 |
<output> |
输出结果 |
<meter> |
度量器 |
3、表单属性
属性 |
用法 |
含义 |
placeholder |
<input type="text" placeholder="请输入用户名"> |
占位符 |
autofocus |
<input type="text" autofocus> |
自动获得焦点 |
multiple |
<input type="file" multiple> |
多文件上传 |
autocomplete |
<input type="text" autocomplete="off"> 值:off、on |
自动完成 |
form |
<input type="text" form="某表单ID"> |
|
novalidate |
<form novalidate></form> |
关闭验证 |
required |
<input type="text" required> |
必填项 |
pattern |
<input type="text" pattern="\d"> |
自定义验证 |