Skip to content

Audio 和 Video

标签

  • 可以通过 audio 嵌入音频,通过 video 嵌入视频

    html
    <audio src="m.mp3"/>
    <video src="m.mp4" width=320 height=400 />
  • 可以向标签中插入文本,用于浏览器不支持这两个标签时,显示提示文字

    html
    <audio src="m.mp3">您的浏览器不支持</audio>
  • 由于浏览器对标准音频和视频的编解码支持并不一致,所以通常需要使用<source>元素来为指定不同格式的媒体源

    html
    <audio> 
      <!-- source 不用关闭-->
      <source src="m.mp3" type="audio/mpeg">   
      <source src="m.ogg" type="audio/ogg;codec='vorbis'">  
      您的浏览器不支持
    </audio>
公共的属性
标签名说明
autoplayautoplay如果出现该属性,则在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件(比如播放/暂停按钮)。
looploop如果出现该属性,则每当结束时重新开始播放。
mutedmuted如果出现该属性,则输出静音。
preloadauto:页面加载后载入整个音频
metadata:假面加载后只载入元数据
none:无需加载数据
规定当网页加载时,是否默认被加载以及如何被加载。
srcurl文件的url
poster*(video 独有)*url视屏封面用一张图片替代
height*(video 独有)*number视频元素的高度
width*(video 独有)*number视频元素的宽度

使用 JavaScript 操控

1. 创建 / 获取元素
js
// 获取
var audio = document.getElementById('audio')
// 创建
var audio = new Audio('./成都.mp3')
var audio = document.createElement('audio')

video 没有 new 方法

2. 只读属性
属性数据类型说明
durationFloat整个媒体文件的播放时长,以秒为单位。如果无法获取时长,则返回 NaN
pausedBoolean如果媒体文件当前被暂停,则返回 true。如果还未开始播放,默认返回 true
endedBoolean如果媒体文件已经播放完毕,则返回 true
currentLoopInteger返回媒体已经播放的循环次数
currentSrcString返回当前正在播放或已加载的文件。对应 source 元素中选择的文件
seekingBoolean如果播放器正在跳到一个新的播放点,值为 true
networkStateInteger表示媒体当前网络连接状态。0 表示空,1 表示加载中,2 表示加载元数据,3 表示加载了第一帧,4 表示加载完成
readyStateInteger表示媒体是否已经准备就绪。0 表示媒体不可用,1 表示可以显示当前帧,2 表示媒体可以开始播放,3 表示媒体可以从头播放到尾
playedTimeRanges返回已经播放的时间段
bufferedTimeRanges返回当前已经缓冲的时间段
seekableTimeRanges返回当前播放器需要跳到的时间段

TimeRanges 对象:包括一个或多个时间范围

  • length:表示有多少个时间范围
  • start(index):返回 index 对应的时间范围的开始时间
  • end(index):返回 index 对应的时间范围的结束时间
3. 可读写属性
属性数据类型说明
autoplayBoolean取得或设置 autoplay 标签
controlsBoolean取得或设置 controls 标签,用于显示或影藏浏览器内置控件
loopBoolean取得或设置媒体是否应该在播放完再循环开始
mutedBoolean取得或设置媒体是否静音
startFloat取得或设置媒体文件中的位置,以秒为单位,从该处开始播放
volumeFloat取得或设置当前音量,值为 0.01.0
方法
方法名说明
play()播放
pause()停止
load()重新加载
事件监听
type触发时间点
abort播放中断时
play开始播放时
pause暂停播放时
loadedmetadata获取完媒体的元数据时
ended播放结束时