音频、视频播放时属性、事件等操作

音频、视频 具有的方法/属性/事件（几个常用示例）

<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    当视频由于需要缓冲下一帧而停止