HTML5学习之视频和音频
2015-05-12 22:34
417 查看
1.HTML5 IE浏览器的话,需要IE9或以上才支持
2.案例代码
Video的常见属性
Video的API方法
Video的API属性
Video的常用事件
audio的常见属性
2.案例代码
<!doctype html> <html> <head></head> <body> <!--<video src="movie.webm" controls="controls"> 您的破浏览器不支持,请升级为IE9或换其他浏览器。 </video> <hr /> 多资源的视频播放 <video controls="controls" width="500" height="500" autoplay="autoplay" loop="loop" poster="PLMM.jpg"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> 您的浏览器不支持视频标签,还不赶快升级。 </video>--> <hr /> 使用以下VIDEO标签的API<br /> <video src="movie.webm" controls="controls" id="video"> 您的破浏览器不支持,请升级为IE9或换其他浏览器。 </video> <br /> <button onclick="bofang()">播放</button> <button onclick="zanting()">暂停</button> <button onclick="kuaijin()">快进10秒</button> <button onclick="kuaitui()">快退10秒</button> <button onclick="shutup(this)">闭嘴</button> <button onclick="soso()">加速播放</button> <button onclick="yu()">减速播放</button> <button onclick="normal()">正常播放</button> <button onclick="upper()">提高嗓门</button> <button onclick="lower()">降低嗓门</button> <script> //获取对应的video标签 var video=document.getElementById('video'); //播放方法 function bofang(){ video.play(); } //暂停方法 function zanting(){ video.pause(); } //快进10秒 function kuaijin(){ video.currentTime+=10;//相当于video.currentTime=video.currentTime+10 } //快退10秒 function kuaitui(){ video.currentTime-=10; } //静音按钮 function shutup(obj){ if(video.muted){ obj.innerHTML="闭嘴"; video.muted=false; }else{ obj.innerHTML="张嘴"; video.muted=true; } } //加速播放(3倍速度) function soso(){ video.playbackRate=3; } //慢速播放(慢三倍) function yu(){ video.playbackRate=1/3; } //正常倍速 function normal(){ video.playbackRate=1;//默认的播放倍速是1 } //调高声音 function upper(){ video.volume+=0.2;//声音值的范围是0-1 } //调低声音 function lower(){ video.volume-=0.2; } </script> <hr /> 音频标签的使用<br /> <audio src="MP3.mp3" controls="controls"> 您的破浏览器不支持,请升级为IE9或换其他浏览器。 </audio> </body> </html>
Video的常见属性
属性 | 值 | 描述 |
Autoplay | Autoplay | 视频就绪自动播放 |
controls | controls | 向用户显示播放控件 |
Width | Pixels(像素) | 设置播放器宽度 |
Height | Pixels(像素) | 设置播放器高度 |
Loop | Loop | 播放完是否继续播放该视频,循环播放 |
Preload | Proload | 是否等加载完再播放 |
Src | url | 视频url地址 |
Poster | Imgurl |
方法 | 属性 | 事件 |
play() | currentSrc | play |
pause() | currentTime | pause |
load() | videoWidth | progress |
canPlayType | |
| 全屏 | 退出全屏 |
Webkit (Safari5.1 /Chrome 15) | element.webkitRequestFullScreen(); | document.webkitCancelFullScreen(); |
Firefox (works in nightly) | element.mozRequestFullScreen(); | document.mozCancelFullScreen(); |
W3C 提议 | element.requestFullscreen(); |
属性 | 说明 |
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 | 页面加载时是否同时加载音视频 |
|
属性 | 说明 |
seeking | 返回用户是否做了跳转操作 |
src | 当前音视频源的URL |
startOffsetTime | 返回当前的时间偏移(Date对象) |
textTracks | 返回可用的文本轨迹(TextTrackList对象) |
videoTracks | 返回可用的视频轨迹(VideoTrackList对象 |
事件 | 描述 |
abort | 当音视频加载被异常终止时产生该事件 |
canplay | 当浏览器可以开始播放该音视频时产生该事件 |
canplaythrough | 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件 |
durationchange | 当媒体的总时长改变时产生该事件 |
emptied | 当前播放列表为空时产生该事件 |
ended | 当前播放列表结束时产生该事件 |
error | 当加载媒体发生错误时产生该事件 |
loadeddata | 当加载媒体数据时产生该事件 |
loadedmetadata | 当收到总时长,分辨率和字轨等metadata时产生该事件 |
loadstart | 当开始查找媒体数据时产生该事件 |
事件 | 描述 |
pause | 当媒体暂停时产生该事件 |
play | 当媒体播放时产生该事件 |
playing | 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件 |
progress | 当获取到媒体数据时产生该事件 |
ratechange | 当播放倍数改变时产生该事件 |
seeked | 当用户完成跳转时产生该事件 |
seeking | 当用户正执行跳转时操作的时候产生该事件 |
stalled | 当试图获取媒体数据,但数据还不可用时产生该事件 |
suspend | 当获取不到数据时产生该事件 |
timeupdate | 当前播放位置发生改变时产生该事件 |
属性 | 值 | 描述 |
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
相关文章推荐
- Html5学习笔记四—播放音频和视频文件
- html5学习笔记(五)音频、视频
- HTML5学习总结-04 音频&视频播放
- HTML入门学习 -- HTML5 视频与音频
- 【HTML5学习笔记】9:音频和视频的嵌入
- HTML5学习之视频与音频(三)
- html5 学习之路 一(视频、音频、拖放)
- HTML5 学习之音频与视频的播放
- HTML5 学习笔记10-音频视频
- HTML5学习记录一:播放视频,音频和拖放
- HTML5学习笔记第一节(智能提示和视频音频标签)
- 【HTML5+css3】学习笔记之音频元素和视频元素
- Krpano学习:视频音频播放
- HTML5音频与视频
- 一款HTML5的基础视频教程分享给大家,希望大家好好学习啊。
- HTML5媒体(音频/视频)
- HTML5-音频audio和视频video标签
- L03HTML5学习视频CSS3基础
- 几款免费的支持HTML5的音频视频转换软件推荐
- HTML5新增标签2,视频,音频,调节颜色