脚本化音频和视频


使用 JavaScript 播放音视频

HTML5 引入了 <video><audio> 元素用于表示视频和音频。

类型选择和加载

可以通过 canPlayType() 方法测试一个媒体元素是否能播放指定类型的媒体文件:

var a = new Audio();
if (a.canPlayType("audio/wav")) {
    a.src = "soundeffect.wav";
    a.play();
}

设置媒体元素的src属性时,加载媒体的过程就开始了。

控制媒体播放

<audio><video> 元素最重要的方法就是 play()pause() 了,用来控制媒体开始和暂停播放,除此之外,还可以通过设置 currentTime 属性来进行定点播放。

volume 属性表示播放音量,介于 0~1 之间,设置 mutedtrue 会进入静音模式。

playbackRate 属性用于指定媒体播放的速度,1.0 表示正常播放,大于1表示快进,小于1表示慢放,负值表示回放。

如果 <audio><video> 元素有 controls 属性,它就会在播放器上显示控件,让用户控制媒体的播放。

controls(播放控件)、loop(是否循环播放)、preload(开始播放前预加载) 和 autoplay (已经缓存足够多的媒体内容时是否自动开始播放)这些 HTML 属性不仅影响音频和视频的播放,还可以作为 JavaScript 属性来设置和查询。

查询媒体状态

  • paused:是否暂停
  • seeking:是否正在跳到一个新的播放点
  • ended:播放完(循环播放则永远不为true)
  • duration:媒体时长,单位是秒
  • initialTime:媒体开始时间,单位也是秒
  • played:已播放时间段
  • buffered:返回当前已缓冲时间段
  • seekable:返回当前播放器需要跳到的时间段
  • readyState:指定当前已经加载多少媒体内容
  • networkState:指定媒体元素是否使用网络或者为什么不使用网络
  • error:媒体加载或播放过程中报错就可以用到这个属性

媒体相关事件

和大多数 HTML 元素一样,<audio><video> 元素在它们的状态发生改变时会触发一些相应的事件:


点赞 取消点赞 收藏 取消收藏

<< 上一篇: 脚本化图片

>> 下一篇: SVG:可伸缩的矢量图形