音视频的发展史
早期：<embed>+<object>+文件
问题：不是所有浏览器都支持，而且embed不是标准。
现状：Realplay、window media、Quick Time 、Flash
问题：每个厂商每个标准，网站编码和格式也都不相同，flash的出现解决了面的问题，但是apple在07年决定任何设备将不再支持flash。而安卓也在4.0版本之后不再支持Flash，
因为Flash很占内存。
HTML5认为浏览器应该原生支持音视频，因为他们现在也是web中的一等公民了！
视频格式的简单介绍
常见的视频格式
视频的组成部分：画面、音频、编码格式
视频编码：H.264、Theora、VP8(google开源)
其中H.264是收费的。
常见的音频格式
视频编码：ACC、MP3、Vorbis
其中ACC、MP3是收费的。
HTML5支持的格式
HTML5能在完全脱离插件的情况下播放音视频，但是不是所有格式都支持。
HTML5支持的视频格式：
Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O
注：各浏览器简写（F：火狐 、C：谷歌 、O：opera、 I：IE 、 S：safari（苹果））
因为H.264是收费的，那么MEPG4同样也是收费的，MEPG4就是我们常说的MP4。MP4是一种很古老的视频格式了，用过MP4的小伙伴应该知道。MP4各方面的技术也非常成熟，唯一不好的地方就是收费。
<Video>的使用
第一种
<video src="文件地址" controls="controls"></video>
此种方式，在不支持HTML5相关视频格式的浏览器中显示为空白，这很不友好。
第二种
<video src="文件地址" controls="controls"> 您的浏览器暂不支持video标签。播放视频 </video>
此方式将在不支持HTML5相关视频格式的浏览器中显示自定义的文字。若支持HTML5则显示结果和第一种一样。
第三种
<video controls="controls" width="300"> <source src="move.ogg" type="video/ogg" > <source src="move.mp4" type="video/mp4" > 您的浏览器暂不支持video标签。播放视频 </video>
此种方式可以让浏览器来选择支持的视频格式进行播放，如上，如果ogg格式支持，则播放ogg视频，如果ogg不支持，则判断mp4是否支持，如果MP4支持，则播放mp4格式视频。如果mp4格式也不支持，则显示自定义文本。
Video的常见属性
| 属性 |
值 |
描述 |
| Autoplay |
Autoplay |
视频就绪自动播放 |
| controls |
controls |
向用户显示播放控件 |
| Width |
Pixels(像素) |
设置播放器宽度 |
| Height |
Pixels(像素) |
设置播放器高度 |
| Loop |
Loop |
播放完是否继续播放该视频，循环播放 |
| Preload |
Proload |
是否等加载完再播放 |
| Src |
url |
视频url地址 |
| Poster |
Imgurl |
加载等待的画面图片 |
| Autobuffer |
Autobuffer |
设置为浏览器缓冲方式，不设置Autoplay才有效 |
Video的API方法
| 方法 |
属性 |
事件 |
| play() |
currentSrc |
play |
| pause() |
currentTime |
pause |
| load() |
videoWidth |
progress |
| canPlayType |
videoHeight |
error |
全屏操作
| 全屏 |
退出全屏 |
|
| Webkit (Safari5.1 /Chrome 15) |
element.webkitRequestFullScreen(); |
document.webkitCancelFullScreen(); |
| Firefox (works in nightly) |
element.mozRequestFullScreen(); |
document.mozCancelFullScreen(); |
| W3C 提议 |
element.requestFullscreen(); |
document.exitFullscreen(); |
Video的API属性
| 属性 |
说明 |
| audioTracks |
返回可用的音轨列表（MultipleTrackList对象） |
| autoplay |
媒体加载后自动播放 |
| buffered |
返回缓冲部件的时间范围(TimeRanges对象) |
| controller |
返回当前的媒体控制器（MediaController对象） |
| controls |
显示播控控件 |
| crossOrigin |
CORS设置 |
| currentSrc |
返回当前媒体的URL |
| currentTime |
当前播放的时间，单位秒 (快进快退10秒) |
| defaultMuted |
缺省是否静音 |
| defaultPlaybackRate |
播控的缺省倍速（正数表示加速，负数表示减速） |
| duration |
返回媒体的播放总时长，单位秒 |
| ended |
返回当前播放是否结束标志 |
| error |
返回当前播放的错误状态 |
| initialTime |
返回初始播放的位置 |
| loop |
是否循环播放 |
| mediaGroup |
当前音视频所属媒体组 (用来链接多个音视频标签) |
| muted |
是否静音 |
| networkState |
返回当前网络状态 |
| paused |
是否暂停 |
| playbackRate |
播放的倍速(加速、减速播放) |
| played |
当前播放部件已经播放的时间范围(TimeRanges对象) |
| preload |
页面加载时是否同时加载音视频 |
| readyState |
返回当前的准备状态 |
| seekable |
返回当前可跳转部件的时间范围(TimeRanges对象) |
| seeking |
返回用户是否做了跳转操作 |
| src |
当前音视频源的URL |
| startOffsetTime |
返回当前的时间偏移(Date对象) |
| textTracks |
返回可用的文本轨迹(TextTrackList对象) |
| videoTracks |
返回可用的视频轨迹(VideoTrackList对象) |
| volume |
音量值(0~1之间) |
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>的使用
同样支持三中方式
方式一
<audio src="文件地址" controls="controls"></audio>
方式二
<audio src="文件地址" controls="controls"> 您的浏览器暂不支持audio标签。播放视频 </video>
方式三
<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。 |
Demo，这里我用的是FF浏览器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <div style="background-color:lightblue;"> <input type="button" value="播放" onclick="play();" /> <input type="button" value="暂停" onclick="pause();"/> <input type="button" value="全屏" onclick="requestFullscreen();"/> <input type="button" value="退出全屏" onclick="exitFullscreen()"/> <input type="button" value="快进" onclick="speed()"/> <input type="button" value="快退" onclick="back()" /> <input type="button" value="加速" onclick="speedUp()" /> <input type="button" value="减速" onclick="speedDown()" /> <input type="button" value="正常" onclick="speedNormal()" /> <input type="button" value="调高音量" onclick="upper()" /> <input type="button" value="降低音量" onclick="lower()" /> </div> <video id="video" src="/video/多情侠客 郑少秋 140120_高清.mp4" controls="controls" width="600" height="500" poster="/img/zsq.png"> 您的浏览器暂不支持video标签播放视频 </video> <script type="text/javascript"> var video = document.getElementById("video"); //播放 function play() { video.play(); } //暂停 function pause() { video.pause(); } //全屏 function requestFullscreen() { video.mozRequestFullScreen(); } //退出全屏 function exitFullscreen() { video.mozCancelFullScreen(); } //快进 function speed() { video.currentTime += 10; //快进10秒 } //快退 function back() { video.currentTime -= 10;//快退10秒 } //加速 function speedUp() { video.playbackRate = 2; //加速播放(2倍速度) } //减速 function speedDown() { video.playbackRate = 1 / 2;//慢速播放(慢2倍) } //正常播放 function speedNormal() { video.playbackRate = 1;//默认的播放倍速是1 } //调高声音 function upper() { video.volume += 0.1;//声音值的范围是0-1 } //调低声音 function lower() { video.volume -= 0.1; } </script> </body> </html>
运行效果如下：
音频Demo，用法和video相似。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> 音频标签的使用<br /> <audio src="/audio/逃跑计划 - 夜空中最亮的星.mp3" controls="controls"> 您的浏览器该升级了，赶紧换了吧，便于欣赏中国好声音。 </audio> </body> </html>
本文转自邹琼俊博客园博客，原文链接：http://www.cnblogs.com/jiekzou/p/6227996.html，如需转载请自行联系原作者
