音频、视频 具有的方法/属性/事件(几个常用示例)
<audio id="media" loop autoplay src="public/img/music.mp3"></audio>
<video id="media" webkit-playsinline="true" src="media.mp4" preload="auto" poster="poster.jpg" x-webkit-airplay="true"></video>
<video id="media" webkit-playsinline="true" x5-playsinline="true" playsinline="true" preload="auto" poster="poster.jpg" x-webkit-airplay="allow" airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true">
您的浏览器不支持 video 标签。
<source src="media.mp4" preload="" type="video/mp4">
</video>
var $myMedia = $("#media")[0];
Audio/Video 方法
$myMedia.play(); //播放视频
$myMedia.pause(); //暂停视频
Audio/Video 属性
$myMedia.currentTime; //视频播放时间
$myMedia.duration; //视频总时间长
$myMedia.buffered.start(0); //已缓冲范围的开始位置
$myMedia.buffered.end(0); //已缓冲范围的结束位置(已加载的时长)
$myMedia.muted = true; //视频静音
Audio/Video 事件
timeupdate 当 音频/视频 播放时,位置(播放时间变化)更改时触发
$myMedia.addEventListener("timeupdate", myMedia_timeupdate , false);
function myMedia_timeupdate(){
//移除事件,则不触发进入 myMedia_timeupdate 方法中,可再设置播放后添加 时间更改时事件 进入 myMedia_timeupdate 方法中:$myMedia.addEventListener("timeupdate", myMedia_timeupdate , false);
$myMedia.removeEventListener("timeupdate", myMedia_timeupdate , false);
}
pause 当 音频/视频 已暂停时触发
$myMedia.addEventListener("pause", myMedia_pause , false);
function myMedia_pause(){
//移除事件,则不触发进入 myMedia_pause 方法中,可再设置播放后添加 暂停事件 ,当再次暂停时进入 myMedia_pause 方法中:$myMedia.addEventListener("timeupdate", myMedia_pause , false);
$myMedia.removeEventListener("pause", myMedia_pause , false);
}
ended 当 音频/视频 已结束时触发
$myMedia.addEventListener("ended", function(){
//当前视频播放结束
} ,false);
------------------------------------------------------
根据播放时间操作
//根据视频播放时间控制元素(此用法 不是 所有浏览器支持)
$myMedia.ontimeupdate = function(){
if($myMedia.currentTime > 0){
//当前视频已播放时长大于0
}
if($myMedia.currentTime == $myMedia1.duration){
//当前视频已播放时长等于总时长
}
};
//根据视频播放时间控制元素(此用法 多 浏览器支持)
$myMedia.addEventListener("timeupdate", function(){
if($myMedia.currentTime > 0){
//当前视频已播放时长大于0
}
if($myMedia.currentTime == $myMedia1.duration){
//当前视频已播放时长等于总时长
}
}, false);
------------------------------------------------------
音频、视频 具有的方法/属性/事件(展示)
方法:
addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频
属性:
audioTracks 返回表示可用音轨的 AudioTrackList 对象
autoplay 设置或返回是否在加载完成后随即播放音频/视频
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
controls 设置或返回音频/视频是否显示控件(比如播放/暂停等)
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置(以秒计)
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
duration 返回当前音频/视频的长度(以秒计)
ended 返回音频/视频的播放是否已结束
error 返回表示音频/视频错误状态的 MediaError 对象
loop 设置或返回音频/视频是否应在结束时重新播放
mediaGroup 设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)
muted 设置或返回音频/视频是否静音
networkState 返回音频/视频的当前网络状态
paused 设置或返回音频/视频是否暂停
playbackRate 设置或返回音频/视频播放的速度
played 返回表示音频/视频已播放部分的 TimeRanges 对象
preload 设置或返回音频/视频是否应该在页面加载后进行加载
readyState 返回音频/视频当前的就绪状态
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
src 设置或返回音频/视频元素的当前来源
startDate 返回表示当前时间偏移的 Date 对象
textTracks 返回表示可用文本轨道的 TextTrackList 对象
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象
volume 设置或返回音频/视频的音量
事件:
abort 当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时(注:安卓是页面加载时触发;IOS是视频play()后才触发)
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange 当音频/视频的时长已更改时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
loadeddata 当浏览器已加载音频/视频的当前帧时
loadedmetadata 当浏览器已加载音频/视频的元数据时
loadstart 当浏览器开始查找音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据,但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止