Audio与Video的API:
下述的 dom 为 video/audio的dom对象
- dom.volum 读取或设置视频/音频音量
- dom.duration 读取视频/音频总时长 (单位:秒)
- dom.currentTime 读取或设置播放时间(单位:秒)
- dom.playbackrate 读取或设置播放速率,1为1倍播放速率
- dom.play() 函数 播放
- dom.pause() 函数, 暂停
- dom.paused 检查是否已暂停(暂停返回ture,播放返回false)
- dom.ontimeUpdate 事件 当前播放时间发生变化时触发
- dom.ondurationchange 事件 当总时长发生变化时触发
全屏相关API
- document.fullscreen 返回当前是否是全屏状态 (全屏:ture)
- dom.onfullscreenchange 事件 当dom对象的全屏状态改变时触发
- document.exitFullscreen() 函数 退出全屏
- dom.requestFullscreen 函数 进入全屏
详解 - 以audio为例
创建或获取audio对象
//创建方法一
<audio id="music" src="...地址"></audio>
<script>
//获取dom对象
var audio = document.querySelector('#music')
//创建方法二
var audio = new Audio('...地址')
</script>
API详解
<script>
//接上
var audio =document.querySelector('#music')
//开始播放
audio.play()
//暂停播放
audio.pause()
// 设置或获取自动播放状态
audio.autoplay = ture // 为自动播放
audio.autoplay = false
// 设置或获取音乐地址
audio.src = '...地址'
// 设置或读取音量,最大值为1,0为静音
audio.volume = 1
// 设置或获取循环状态
audio.loop = true //当播放完后会在重新播放
// 获取该音乐的总时间,单位为秒
audio.duration
// 设置或获取播放时间 (播放时间即 会随音乐的进度改变的时间)
audio.currentTime
// 判断音乐是否已经播放完毕
audio.ended
</script>
事件
<script>
//接上
var audio =document.querySelector('#music')
// playing 当音乐开始播放,或者暂停后重新开始播放都会触发该事件,设置currentTimr后开始播放时也会触发
audio.addEventListener('playing', function () {
console.log('playing')
})
// 当然 ,这样写也可以
audio.onplaying = function(){
console.log('playing')
}
// pause 当音乐暂停或结束时触发
audio.addEventListener('pause', function () {
console.log('pause')
})
// ended 当音乐结束时触发
audio.addEventListener('ended', function () {
console.log('ended')
})
//timeupdata 当播放时间(currentTime)更新时,会触发该事件 (触发频率很高)
audio.addEventListener('timeupdata', function () {
console.log('timeupdata')
})
// volumechange 当音量改变时触发
audio.addEventListener('volumechange', function () {
console.log('volumechange')
})
</script>