html5音频视频专题

总结

1、操作的就是video和audio两个对象，这两个对象有他们的属性和方法，通过对象的id就可以操作他们

2、得到了video和audio对象，然后来操作这两者就不要太容易

学习要点

掌握HTML5中音频视频的属性方法事件

基础知识回顾

video

src 要播放的视频的 URL。
autoplay 如果出现该属性，则视频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height/width 设置视频播放器的高度/宽度。
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

audio

src 要播放的视频的 URL。
autoplay 如果出现该属性，则视频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

video/audio 方法

play() 播放媒体文件自动把paused属性变为flase
pause() 暂停，自动把paused属性变为true
load()加载媒体文件，为播放做准备。通常用于播放前的预加载。
canPlayType()测试浏览器是否支持指定的媒体类型
- canPlayType() 方法可返回下列值之一：
  1. "probably" - 浏览器最可能支持该音频/视频类型
  2. "maybe" - 浏览器也许支持该音频/视频类型
  3. "" - （空字符串）浏览器不支持该音频/视频类型
- type的值
  video/ogg video/mp4 video/webm audio/mpeg audio/ogg audio/mp4
addTextTrack() 向音频/视频添加新的文本轨道.目前浏览器尚不支持该方法

video/audio 属性以及事件

属性

paused 设置或返回音频/视频是否暂停属性值 true|false。true 指示音频/视频已暂停。否则为 false。
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted 设置或返回音频/视频默认是否静音属性值为布尔值
设置该属性仅会改变默认的静音状态，而不是当前的。要改变当前的静音状态，请使用 muted 属性
muted 设置或返回音频/视频是否静音 audio|video.muted=true|false
volume 属性设置或返回音频/视频的当前音量。规定音频/视频的当前音量。必须是介于 0.0 与 1.0 之间的数字。
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
- 设置 controls 属性：audio|video.controls=true|false
- 返回 controls 属性：audio|video.controls
defaultPlaybackRate 属性设置或返回音频/视频的默认播放速度。
设置该属性仅会改变默认的播放速度，而不是当前的。要改变当前的播放速度，请使用 playbackRate 属性。
属性值为数值：1为正常速度，大于1则速度加快，小于1则速度减慢。
playbackRate 设置或返回音频/视频播放的速度
duration 返回当前音频/视频的长度（以秒计）
ended 属性返回音频/视频是否已结束。true|false。如果播放已结束，则返回 true。否则返回 false。
错误状态error error 属性返回一个 MediaError 对象。(不是所有浏览器都支持该属性)
MediaError 对象的 code 属性包含了音频/视频的错误状态。

正常的状态下，code 的属性值为null;
有错误时会返回四个错误的状态值 1.用户终止 2.网络错误 3.解码错误 4.URL无效(格式不被支持)
loop 属性设置或返回音频/视频是否应该在结束时再次播放。audio|video.loop=true|false
mediaGroup 属性设置或返回音频/视频所属的媒体组合的名称。audio|video.mediaGroup="group"
networkState 返回音频/视频的当前网络状态
0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
played 返回表示音频/视频已播放部分的 TimeRanges 对象
TimeRanges 对象表示用户已经播放或看到的音频/视频范围。
已播范围指的是被播放音频/视频的时间范围。如果用户在音频/视频中跳跃，则会获得多个播放范围。
首段已播范围的下标是 0
- length - 获得音频/视频中已播范围的数量
- start(index) - 获得某个已播范围的开始位置
- end(index) - 获得某个已播范围的结束位置
preload 属性设置或返回是否在页面加载后立即加载音频/视频。audio|video.preload="auto|metadata|none"
- auto 指示一旦页面加载，则开始加载音频/视频。
- metadata 指示当页面加载后仅加载音频/视频的元数据。
- none 指示页面加载后不应加载音频/视
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
readyState 属性返回音频/视频的当前就绪状态。
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
TimeRanges对象表示用户的音视频缓冲范围对象属性:
1. length - 获得音视频中已缓冲范围的数量
2. start(index) - 获得某个已缓冲范围的开始位置
3. end(index) - 获得某个已缓冲范围的结束位置
事件
- timeupdate 当目前的播放位置已更改时
- abort 当音频/视频的加载已放弃时
- canplay 当浏览器可以播放音频/视频时
- canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
- durationchange 当音频/视频的时长已更改时
- emptied 当目前的播放列表为空时
- ended 当目前的播放列表已结束时
- error 当在音频/视频加载期间发生错误时
- loadeddata 当浏览器已加载音频/视频的当前帧时
- loadedmetadata 当浏览器已加载音频/视频的元数据时
- loadstart 当浏览器开始查找音频/视频时
- pause 当音频/视频已暂停时
- play 当音频/视频已开始或不再暂停时
- playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
- progress 当浏览器正在下载音频/视频时
- ratechange 当音频/视频的播放速度已更改时
- seeked 当用户已移动/跳跃到音频/视频中的新位置时
- seeking 当用户开始移动/跳跃到音频/视频中的新位置时
- stalled 当浏览器尝试获取媒体数据，但数据不可用时
- suspend 当浏览器刻意不获取媒体数据时
- volumechange 当音量已更改时
- waiting 当视频由于需要缓冲下一帧而停止

html5音频视频专题

html5音频视频专题

总结

学习要点

video

audio

属性

事件

实例