深入浅出篇 — Video & Audio

1,090 阅读2分钟

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>