方法 5个
play() // 开始播放
pause() // 暂停
load() // 重新加载
canPlayType() // 检测浏览器是否能播放指定类型
addTextTrack() // unsupport 添加新文本轨道
属性 29个 r:返回 s:设置
src // r s 来源
currentSrc // r url
loop // r s 循环
volume // r s 音量
muted // r s 静音
paused // r s 暂停
preload // r s 是否自动加载
autoplay // r s 自动播放
currentTime // r s 播放位置
controls // r s 显示控制器
crossOrigin // r s CORS跨域设置
duration // r 视频长度(s)
buffered // r 缓冲范围
readyState // r 是否就绪
ended // r 是否播放完成
networkState // r 网络状态
played // r 已播放部分的TimeRanges对象
seekable // r 可寻址的TimeRanges(即可跳转到的位置范围)
seeking // r 是否在寻址中(即在移动、跳转到新位置)
---------------------------------------------------------------------
playbackRate // r s chrome&safari support 播放速度
defaultPlayBackRate // r s chrome support 默认播放速度
defaultMuted // r s chrome support 默认是否静音
startDate // r unsupport 当前时间便宜的Date对象
audioTracks // r unsupport 音轨
textTracks // r unsupport 返回文本轨迹
videoTracks // r unsupport 返回音频轨道
controller // r unsupport 控制器
mediaGroup // r s unsupport 所属的组合
事件 21个
let events = {
'play':this.tmp, // 播放时
'pause':this.tmp, // 暂停时
'ended':this.playNext, // 播放完一首
'playing':this.tmp, // 因缓冲暂停后,可以继续播放时
'waiting':this.tmp, // 因缓冲而停止
'emptied':this.tmp, // 播放列表为空
'ratechange':this.tmp, // 播放倍数改变时
'volumechange':this.tmp, // 音量改变时
'timeupdate':this.tmp, // 播放位置发生改变
'seeking':this.tmp, // 正在跳转时
'seeked':this.tmp, // 用户完成跳转时
'loadstart':this.tmp, // 开始查找媒体数据时
'durationchange':this.tmp, // 加载后,时长将由 "NaN" 变为音频/视频的实际时长
'loadedmetadata':this.tmp, // 收到总时长、分辨率、字轨等metadata时
'loadeddata':this.tmp, // 开始加载数据
'process':this.tmp, // 获取到媒体数据时
'canplay':this.tmp, // 可以开始播放
'canplaythrough':this.tmp, // 浏览器判断,开始播放到完成,无需停下来缓冲时
'stalled':this.tmp, // 试图获取媒体数据,但还不可用
'suspend':this.tmp, // 获取不到数据时
'abort':this.tmp, // 加载异常终止
'error':this.tmp, // 加载错误
'':this.tmp
}
JavaScript控制音频
<audio src="music.mp3" id='m' preload='none'></audio>
var m = document.getElementById('m')
选择加载时机 (写在标签上)
preload:用来控制音频在什么时候进行加载。
<audio src="m.mp3" preload="auto"></audio>
none:默认不加载,等有需要的时候再加载。
metadata:元数据,默认不加载,但是可以提取该音频的元数据信息。
auto:自动加载,网页加载完就加载整个音频。
控制加载: m.load();//加载
控制播放: m.play();
控制暂停: m.pause();
获取播放/暂停状态:
m.play
m.pause
指定播放时间:m.fastSeek(20); (只有firefox支持,其他用currentTime来实现)
获取和设置已播放的时间
m.currentTime
m.currentTime = 10;,音频会定位到10秒的播放位置。
是否自动播放:
m.autoplay = true;
标签autoplay
是否循环播放:
m.loop = true;
标签loop
静音: m.muted = true;
调节音量: m.volume = 0.1;
显示控制面板:
m.controls = true;
标签:contrils
方法 方法描述
addTextTrack() 为音视频加入一个新的文本轨迹
canPlayType() 检查指定的音视频格式是否得到支持
load() 重新加载音视频标签
play() 播放音视频
pause() 暂停播放当前的音视频
属性 属性描述
audioTracks 返回可用的音轨列表(MultipleTrackList对象)
autoplay 媒体加载后自动播放
buffered 返回缓冲部件的时间范围(TimeRanges对象)
controller 返回当前的媒体控制器(MediaController对象)
controls 显示播控控件
crossOrigin CORS设置
currentSrc 返回当前媒体的URL
currentTime 当前播放的时间,单位秒
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 音量值
事件
事件描述
abort 当音视频加载被异常终止时产生该事件
canplay 当浏览器可以开始播放该音视频时产生该事件
canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange 当媒体的总时长改变时产生该事件
emptied 当前播放列表为空时产生该事件
ended 当前播放列表结束时产生该事件
error 当加载媒体发生错误时产生该事件
loadeddata 当加载媒体数据时产生该事件
loadedmetadata 当收到总时长,分辨率和字轨等metadata时产生该事件
loadstart 当开始查找媒体数据时产生该事件
pause 当媒体暂停时产生该事件
play 当媒体播放时产生该事件
playing 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件
progress 当获取到媒体数据时产生该事件
ratechange 当播放倍数改变时产生该事件
seeked 当用户完成跳转时产生该事件
seeking 当用户正执行跳转时操作的时候产生该事件
stalled 当试图获取媒体数据,但数据还不可用时产生该事件
suspend 当获取不到数据时产生该事件
timeupdate 当前播放位置发生改变时产生该事件
volumechange 当前音量发生改变时产生该事件
waiting 当视频因缓冲下一帧而停止时产生该事件
网友评论