• 懒鸟飞:帝国cms模板专业分享平台,新域名:lanniaofei.com

Html5第四课:HTML音视频介绍

      本节课主要讲解html5的音视频标签的使用方法,学完本节课,感想是,html5的音视频标签的很多方法、属性,api接口都是用javascript控制的。所以想灵活的使用这些功能就应该先学会使用javascript 。

音视频的发展史

早期:<embed>+<object>+文件
问题:不是所有浏览器都支持,而且embed不是标准。
 
现状:现在看很多音视频因为不同厂商的原因,所以都需要安装各自的插件,例如Realplay、window media 、Quick Time 、Flash 
问题:每个厂商、标准、网站编码、格式都不相同,flash的出现解决了这个问题,但是由于flash占用资源大,电脑访问flash问题不大,但在移动终端访问时,用流量、电量太大,所以apple在07年决定任何设备将不再支持flash 。
 
Html5制定时,认为浏览器应该本身就支持音视频,音视频现在已经是web的一等公民。
 

视频格式的简介

1、html5支持的常见视频格式
视频的组成部分:画面、音频、编码格式
视频编码:H.264(高清、收费)、Theora(免费)、VP8(google开发、免费开源)
2、Html5支持的常见音频格式
音频编码:AAC(收费)、MP3(收费)、Vorbis(免费)


 

HTML5支持的格式

 
HTML5能在完全脱离插件的情况下播放音视频。但是不是所有格式都支持。
 
HTML5支持的视频格式:
Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件 ,支持的浏览器:F(火狐)、C(谷歌)、O(欧朋浏览器)
MPEG4=带有H.264视频编码+AAC音频编码的MPEG4的文件,支持的浏览器:S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式,支持的浏览器:I、F、C、O
 

<Video>的使用

1、方法一:<video src=”文件地址”  controls=”controls”></video>
 
2、方法二:这种方法添加了一个提示,在浏览器不支持时显示。
<video src=”文件地址”  controls=”controls”>
您的浏览器暂不支持video标签播放视频
</video>
 
3、方法三:放入多个视频资源,浏览器会从第一个开始判断是否支持播放,如果不支持就判断下一个,直到找到支持的视频。
<video controls=”controls” width=”300”>
<source src=”move.ogg”  type=”video/ogg”>
<source src=”move.mp4”  type=”video/mp4”>
您的浏览器暂时不支持video标签播放视频
</video>

 

Video标签的常用属性

 
 
 


Video标签的API方法

 
 
 
使用这些API方法时,需要用javascript控制,试用方法如下:
<video controls="controls" width="600"  poster="cao.jpg" id="cao">
<source src="cao.mp4"   type="video/mp4" >
您的浏览器暂时不支持video标签播放视频

</video>

<br />
<button onclick="bofang()">播放</button>
<button onClick="zanting()">暂停</button>
<script>
var video=document.getElementById('cao');
function bofang(){
video.play();
};
function zanting(){
video.pause();
};
</script>

 

Video的API属性

 
属性:             说明:
audioTracks          返回可用的音轨列表(MultipleTrackList对象)
autoplay             媒体加载后自动播放
buffered             返回缓冲部件的时间范围(TimeRanger对象)
controller            返回当前的媒体控制器(MediaController对象)
controls             显示播控控件
crossOrigin          CORS设置
currentSrc           返回当前媒体的URL
currentTime         当前播放的时间,单位秒(快进快退10秒)
defaultMuted        缺省是否静音
defaultPlazyback Rate 播控的缺省倍速
duration            返回媒体的播放总时长,单位秒。
ended              返回当前播放是否结束标志
error               返回当前播放的错误状态
initialTime          返回初始播放的位置
loop               是否循环播放
mediaGroup         当前音视频所属媒体组(用来连接多个音视频标签)
muted              是否静音(video.muted=true)
networkState        返回当前网络状态
paused             是否暂停
playbackRate        播放的倍速(加速、减速播放)
played              当前播放部件已经播放的时间范围(TimeRanges对象)
preload             页面加载时是否同时加载音视频
readyState           返回当前准备状态
seekable            返回当前可跳转部件的时间范围(TimeRanges对象)
seeking             返回用户是否做了跳转操作 
src                 当前音视频文件的URL
startOffsetTime       返回当前的时间偏移(Date对象)
textTracks           返回可用的文本轨迹(TextTrackList对象)
videoTracks          返回可用的视频轨迹(VideoTrackList对象)
volume              音量值
 

 

Video的常用事件

事件           描述
abort           当音视频加载被异常终止时产生该事件
canplay           当浏览器可以开始播放该音视频时产生该事件
canplaythrough   当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange   当媒体的总时长改变时产生该事件
emptied           当前播放列表为空时产生该事件
ended           当前播放列表结束时产生该事件
error               当加载媒体发生错误时产生该事件
loadeddata       当加载媒体数据时产生该事件
loadedmetadata   当收到总时长,分辨率和字轨等metadata时产生该事件
loadstart           当开始查找媒体数据时产生该事件
pause           当媒体暂停时产生该事件
play               当媒体播放时产生该事件
playing           当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件
progress           当获取到媒体数据时产生该事件
ratechange       当播放倍数改变时产生该事件
seeked           当用户完成跳转时产生该事件
seeking           当用户正执行跳转时操作的时候产生该事件
stalled           当试图获取媒体数据,但数据还不可用时产生该事件
suspend           当获取不到数据时产生该事件
timeupdate       当前播放位置发生改变时产生该事件
volumechange       当前音量发生改变时产生该事件
waiting           当视频因缓冲下一帧而停止时产生该事件

 

 HTML5支持的音频格式

HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放,当然支持格式是有限的
 
HTML5支持的音频格式:
 
Ogg    免费 支持的浏览器:C、F、O
MP3    收费 支持的浏览器: I、C、S
Wav    收费 支持的浏览器: F、O、S


 

<audio>的使用

使用方法和video标签相同,有三种,使用方法如下:
1、<audio  src="文件地址" controls="controls"></audio>
2、< audio src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
</ video >
3、< audio controls="controls"  >
<source src="happy.MP3" type="video/mpeg" >
<source src="happy.ogg" type="video/ogg" >
您的浏览器暂不支持audio标签。播放视频
</ audio>


 

audio的常见属性

属性      值           描述
autoplay      autoplay       如果出现该属性,则音频在就绪后马上播放。
controls      controls       如果出现该属性,则向用户显示控件,比如播放按钮。
loop          loop       如果出现该属性,则每当音频结束时重新开始播放。
preload      preload       如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
src          url           要播放的音频的 URL。


 
QQ在线咨询
QQ客服
淘宝官网