html5音频视频专题

html5音频视频专题

总结

1、 操作的就是video和audio两个对象，这两个对象有他们的属性和方法，通过对象的id就可以操作他们

<audio src="../video/琴箫合奏.mp3" controls="controls"></audio><br>

<video id="video" src="../video/qsmy.mp4" controls="controls" width="400"></video>

2、得到了video和audio对象，然后来操作这两者就不要太容易

学习要点

• 掌握HTML5中音频视频的属性方法事件

---

基础知识回顾

video

• src 要播放的视频的 URL。
• autoplay 如果出现该属性，则视频在就绪后马上播放。
• controls 如果出现该属性，则向用户显示控件，比如播放按钮。
• height/width 设置视频播放器的高度/宽度。
• loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
• preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

audio

• src 要播放的视频的 URL。
• autoplay 如果出现该属性，则视频在就绪后马上播放。
• controls 如果出现该属性，则向用户显示控件，比如播放按钮。
• loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
• preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

---

video/audio 方法

1. play() 播放媒体文件 自动把paused属性变为flase
2. pause() 暂停，自动把paused属性变为true
3. load()加载媒体文件，为播放做准备。通常用于播放前的预加载。
4. canPlayType()测试浏览器是否支持指定的媒体类型
   • canPlayType() 方法可返回下列值之一：
     1. "probably" - 浏览器最可能支持该音频/视频类型
     2. "maybe" - 浏览器也许支持该音频/视频类型
     3. "" - （空字符串）浏览器不支持该音频/视频类型
   • type的值

     video/ogg video/mp4 video/webm audio/mpeg audio/ogg audio/mp4

5. addTextTrack() 向音频/视频添加新的文本轨道.目前浏览器尚不支持该方法

---

video/audio 属性以及事件

属性

• paused 设置或返回音频/视频是否暂停 属性值 true|false。true 指示音频/视频已暂停。否则为 false。
• currentSrc 返回当前音频/视频的 URL
• currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
• defaultMuted 设置或返回音频/视频默认是否静音 属性值为布尔值

  设置该属性仅会改变默认的静音状态，而不是当前的。要改变当前的静音状态，请使用 muted 属性

• muted 设置或返回音频/视频是否静音 audio|video.muted=true|false
• volume 属性设置或返回音频/视频的当前音量。规定音频/视频的当前音量。必须是介于 0.0 与 1.0 之间的数字。
• controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
  • 设置 controls 属性：audio|video.controls=true|false
  • 返回 controls 属性：audio|video.controls
• defaultPlaybackRate 属性设置或返回音频/视频的默认播放速度。

  设置该属性仅会改变默认的播放速度，而不是当前的。要改变当前的播放速度，请使用 playbackRate 属性。
  属性值为数值：1为正常速度，大于1则速度加快，小于1则速度减慢。

• playbackRate 设置或返回音频/视频播放的速度
• duration 返回当前音频/视频的长度（以秒计）
• ended 属性返回音频/视频是否已结束。true|false。如果播放已结束，则返回 true。否则返回 false。
• 错误状态error error 属性返回一个 MediaError 对象。(不是所有浏览器都支持该属性)

  MediaError 对象的 code 属性包含了音频/视频的错误状态。

  正常的状态下，code 的属性值为null;
  有错误时会返回 四个错误的状态值 1.用户终止 2.网络错误 3.解码错误 4.URL无效(格式不被支持)

• loop 属性设置或返回音频/视频是否应该在结束时再次播放。audio|video.loop=true|false
• mediaGroup 属性设置或返回音频/视频所属的媒体组合的名称。audio|video.mediaGroup="group"
• networkState 返回音频/视频的当前网络状态

  0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源

• played 返回表示音频/视频已播放部分的 TimeRanges 对象

  TimeRanges 对象表示用户已经播放或看到的音频/视频范围。
  已播范围指的是被播放音频/视频的时间范围。如果用户在音频/视频中跳跃，则会获得多个播放范围。

  TimeRanges 对象的属性：

  首段已播范围的下标是 0

  • length - 获得音频/视频中已播范围的数量
  • start(index) - 获得某个已播范围的开始位置
  • end(index) - 获得某个已播范围的结束位置
• preload 属性设置或返回是否在页面加载后立即加载音频/视频。audio|video.preload="auto|metadata|none"
  • auto 指示一旦页面加载，则开始加载音频/视频。
  • metadata 指示当页面加载后仅加载音频/视频的元数据。
  • none 指示页面加载后不应加载音频/视
• seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
• seeking 返回用户是否正在音频/视频中进行查找
• readyState 属性返回音频/视频的当前就绪状态。
• videoTracks 返回表示可用视频轨道的 VideoTrackList 对象
• buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
  TimeRanges对象表示用户的音视频缓冲范围 对象属性:
  1. length - 获得音视频中已缓冲范围的数量
  2. start(index) - 获得某个已缓冲范围的开始位置
  3. end(index) - 获得某个已缓冲范围的结束位置

• 事件

  • timeupdate 当目前的播放位置已更改时
  • abort 当音频/视频的加载已放弃时
  • canplay 当浏览器可以播放音频/视频时
  • canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
  • durationchange 当音频/视频的时长已更改时
  • emptied 当目前的播放列表为空时
  • ended 当目前的播放列表已结束时
  • error 当在音频/视频加载期间发生错误时
  • loadeddata 当浏览器已加载音频/视频的当前帧时
  • loadedmetadata 当浏览器已加载音频/视频的元数据时
  • loadstart 当浏览器开始查找音频/视频时
  • pause 当音频/视频已暂停时
  • play 当音频/视频已开始或不再暂停时
  • playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
  • progress 当浏览器正在下载音频/视频时
  • ratechange 当音频/视频的播放速度已更改时
  • seeked 当用户已移动/跳跃到音频/视频中的新位置时
  • seeking 当用户开始移动/跳跃到音频/视频中的新位置时
  • stalled 当浏览器尝试获取媒体数据，但数据不可用时
  • suspend 当浏览器刻意不获取媒体数据时
  • volumechange 当音量已更改时
  • waiting 当视频由于需要缓冲下一帧而停止

---

实例