8-30 音频视频专题
学习要点
- 掌握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() 方法可返回下列值之一：
- "probably" - 浏览器最可能支持该音频/视频类型
- "maybe" - 浏览器也许支持该音频/视频类型
- "" - （空字符串）浏览器不支持该音频/视频类型
- type的值
video/ogg video/mp4 video/webm audio/mpeg audio/ogg audio/mp4
- canPlayType() 方法可返回下列值之一：
- 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 对象表示用户已经播放或看到的音频/视频范围。
已播范围指的是被播放音频/视频的时间范围。如果用户在音频/视频中跳跃，则会获得多个播放范围。- 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对象表示用户的音视频缓冲范围 对象属性:- length - 获得音视频中已缓冲范围的数量
- start(index) - 获得某个已缓冲范围的开始位置
- end(index) - 获得某个已缓冲范围的结束位置
-
事件
- timeupdate 当目前的播放位置已更改时
- abort 当音频/视频的加载已放弃时
- canplay 当浏览器可以播放音频/视频时
- canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
- durationchange 当音频/视频的时长已更改时
- emptied 当目前的播放列表为空时
- ended 当目前的播放列表已结束时
- error 当在音频/视频加载期间发生错误时
- loadeddata 当浏览器已加载音频/视频的当前帧时
- loadedmetadata 当浏览器已加载音频/视频的元数据时
- loadstart 当浏览器开始查找音频/视频时
- pause 当音频/视频已暂停时
- play 当音频/视频已开始或不再暂停时
- playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
- progress 当浏览器正在下载音频/视频时
- ratechange 当音频/视频的播放速度已更改时
- seeked 当用户已移动/跳跃到音频/视频中的新位置时
- seeking 当用户开始移动/跳跃到音频/视频中的新位置时
- stalled 当浏览器尝试获取媒体数据，但数据不可用时
- suspend 当浏览器刻意不获取媒体数据时
- volumechange 当音量已更改时
- waiting 当视频由于需要缓冲下一帧而停止