视频处理
在HTML5中播放视频
- 在HTML5中播放视频
1.HTML5中提到最多的就是视频处理,视频是互联网中的重要应用.在HTML5中,添加了一个新元素,以便在HTML文档中插入和播放视频,这个元素就是video元素
2.video元素提供了播放,暂停和音量控制来控制视频,也提供了width 和height 属性来控制视频的尺寸
(IE8以及以前的版本不支持)
3.使用video元素至少要提供两种视频格式的文件:OGG和MP4
OGG:包含Theora视频和Vorbis音频解码器
MP4:采用H.264视频和AAC音频解码器
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| IE9+ | yes | no | no |
| Chrome | yes | yes | yes |
| Firefox3.6+ | no | yes | yes |
| Safari5+ | yes | no | no |
| Opera10.6+ | no | yes | yes |
- video元素
1.video元素可以实现在HTML页面中嵌入视频内容,该元素的属性可以设置为是否自动播放,预加载及视频高宽等
<video width="360" height="240" src="source/video.mp4">
视频不能播放
</video>
src属性:用于读取媒体文件
autoplay属性:设置该视频是否自动播放
width 和height 属性:设置该视频的宽度和高度
2.video元素中可以使用source元素来向浏览器提供备选视频格式
<video width="360" height="240">
<source src="source/video.mp4/">
<source src="source/video.ogg/">
视频不能播放
</video>
(source元素中的src属性和video元素属性作用相同,都是用于读取媒体文件)
注:使用source元素读取流媒体,video元素不需要使用src属性
- video属性,video元素具备以下属性
controls:该属性是video元素特有属性,用于显示浏览器所提供的视频控件按钮
<video width="360" height="240"
src="source/video.mp4"autoplay controls>
视频不能播放
</video>
(autoplay设置这个属性时,加载视频后自动播放)
poster: 该属性指定一个URL,在视频等待播放时显示一幅图像
preload:该属性可以设置三个值
1.none: 不缓存视频,为了减少不必要的流量
2.metadata:播放前只加载视频的高度,宽度和其他此类信息
3.auto:默认值,要求浏览器尽可能快的下载视频
loop:设置这个属性时,浏览器会反复播放该视频
编程实现视频播放器
- 事件
1.在不同的浏览器实现video代码,播放器控件的图形设计会有一些差别,每一种浏览器都有其特殊的按钮和进度条,设置还有一些特殊的特性,为了让各浏览器显示效果保持一致,需要使用HTML5支持新的视频事件,属性和方法,来保持一致
2.HTML5加入了新的事件API.在视频和音频处理中,HTML5包含一些通知媒体状态的事件,如下载进度,视频是否结束等
3.下面是一些常用事件:
progress:用于更新媒体的下载进度,会周期性的触发
conplaythrough:当整个媒体可以顺利播放时,就会触发这个事件
conplay:不考虑整体状态,只要下载了一定的可放帧会触发这个事件
ended:媒体到达末尾时触发
pause:媒体暂停时触发
play:媒体开始播放时触发
error:媒体播放出现错误时触发
window.onload=function(){
elem=document.getElementById('media');
elem.addEventListener('pause',userPause,flase);
elem.addEventListener('play',userPlay,flase);
}
function userPause(){
.........
}
function userPlay(){
......................
}
- 方法
下面是HTML5新增加的媒体处理方法
play() 播放媒体文件
pause() 暂停播放
load() 加载媒体文件,动态应用程序可使用该方法提前加载
canPlayType(type)查看浏览器是否支持这种文件格式的媒体文件
window.onload=function(){
var elem=document.getElementById('media');
var btn=document.getElementById('play');
if(elem.paused){
elem.play();
btn.value="暂停";
}else{
elem.pause();
btn.value="开始";
}
}
- 属性
html5新增的针对视频元素的处理属性如下:
paused 媒体处于暂停或未播状态,这个值为true
ended 如果媒体已经结束播放,这个值为true
duration 返回媒体时长,以秒为单位
currentTime 获取或设置媒体播放位置
音频处理
在HTML5中播放音频
- audio元素
audio元素可以实现在HTML页面中嵌入音频内容,该元素的属性可以设置是否播放,预加载及循环播放等
audio元素提供了播放,暂停,音量控件来控制音频
- audio属性
3.使用audio元素至少要提供三种音频格式的文件:MP3.Ogg,Wav
3.1MP3:采用mpeg音频解码器
3.2Ogg:采用ogg音频解码器
3.3Wav:采用wav音频解码器
浏览器 MP3 Wav Ogg
IE9+ yes no no
Chrome6+ yes yes yes
Firefox3.6+ no yes yes
Safari5+ yes yes no
Opera10.6+ no yes yes
语法结构:
<audio src="mp3/yellow.mp3" controls>
</audio>
或:
<audio controls>
<source src=
"mp3/yellow.mp3"/>
</audio>
audio元素支持一下属性:
src:指定播放文件的URL,可通过<source>
controls:可激活各浏览器提供的默认页面
autoplay: 加载音频后自动播放
preload: 缓存设置
编程实现音频播放器
- 事件,方法
HTML5媒体API支持视频和音频,视频所支持的每一种事件,方法和属性,音频都有对应的支持
常用事件:
ended
pause
play
常用方法:
play()
pause()
HTML5表单元素
表单简介
无论是实现功能还是展示页面元素,表单的HTML中都有不可代替的作用
在其他版本的HTML中,表单包含的元素非常有限,并且属性也不多,尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码
上述的不足,都已经在HTML5中被克服了,HTML5在以上的基础上增加了许多标签以及属性,为开发人员带来方便
input类型
电子邮件类型
功能描述:输入E-mail地址的文本框
语法:<input type="email"/>搜索类型
输入搜索关键字操作的文本框
语法:<input type="search"/>URL类型
输入Web站点地址的文本框
语法:<input type="url"/>电话号码类型
主要针对电话号码的输入,能够指示浏览器根据不同的设备进行调整
语法:<input type="tel"/>数字类型
只能接受数字值
语法:<input type="number"/>
属性:
min:当前域能接受的最小值
max:当前域能接受的最大值
step:决定了域所接受值的递增或递减的步长.默认为1范围类型
允许用户选择一个范围的数值
语法:<input type="range" min="10" max="1000" value="50"/>
属性:
min 范围的下限值
max 范围的上限值
step 声明该值递增或递减的步长
value 设置初始值颜色类型
预定义颜色拾取控件
语法:<input type="color"/>日期类型
创建一个日期输入域
语法:<input type="date"/>周类型
与data类似,但是只能选择周
语法:<input type="week"/>月份类型
与data类型很相似,但是只能选择一个月份
语法:<input type="month"/>日期与时间类型
支持输入完整的时间和日期,包括时区
语法:<input type="datatime"/>
- 本地日期与时间类型
支持输入完整的时间和日期,但不包括时区
语法:<input type="datatime-local"/>
新表单元素
- Datalist元素
<datalist>元素是一个表单特有的元素,它可以使用list属性预创建一组列表项,后面可以为输入框的输入提示
<datalist id="mylist">
<option value="010" label="北京"/>
<option value="021" label="上海"/>
<option value="023" label="重庆"/>
<option value="022" label="天津"/>
</datalist>
<input type="text" name="address" list="mylist">
- Progress元素
<progress>表示一个任务的完成进度,而且通常这些任务都在表单中启动和处理
属性:
Value:任务执行的进度
Max:声明任务完成后达到的值
<progress max="100" value="20"></progress>
- Meter元素
Meter元素可用于显示刻度,而非进度
属性:
min,max 设置范围边界
value 确定测量的值
low high optimum 将范围划分为不同的部分和设置最佳位置
<meter min="0" max="100 low="20" high="80" optimum="70"value="55"/>
- Output元素
1.Output元素通常用于显示表单元素处理的结果值
属性:
for 将output元素与参与计算的源元素相关联.目的是为了提高代码的可读性
<form
oninput="x.value=parseInt(a.value)+parseInt(b.value)"
>0
<input type="range" id="a" value="50">100+
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
HTML5表单属性
属性介绍
有一些输入类型要求使用特定的属性才能显示效果,如前面提到过的min max step 其他输入类型需要使用一些属性来改进其他性能,或者决定验证过程的重要性
HTML5标准中原来的基础上增加了一些新的属性:Placeholder属性、Multiple属性、Autofocus属性、Form属性
属性详解
Placeholder属性
Placeholder属性通常用于search输入类型,也可以用在文本域,它表示一个简单提示,单词或词汇,可用于帮助用户输入正确的内容.该属性能够在文本域的内部显示一些内容
语法:<input type="text" placeholder="请输入用户名称">Multiple属性
Multiple属性可以用在一些输入类型中(email file等)
从而支持在一个域中输入多个值,但说插入的值必须用逗号分隔
语法:<input type="email" multiple>Autofocus属性
Autofocus属性会在网页加载时自动让域获得焦点,相但与JavaScript中的focus()方法,适用于所有input元素
语法:<input type="text" autofocus/>Form属性
Form属性是一个实用的附加功能,它可用于form标签之外声明元素
语法:
<form id="myform">
</form>
<input type="text" form="myform" name="uname"/>
