Html5视频、音频、API控件---第二天

二、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、表单输入类型

类型	使用示例	含义
email	<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">	自定义验证