https://www.yuque.com/chenshier/chuyi/cl0x98 多媒体（video和audio）

1. HTML常用属性

2. 只读属性

readyState:

1. HAVE_NOTHING（数字值为0）：没有获取到媒体的任何信息，当前播放位置没有可播放数据。
2. HAVE_METADATA（数字值为1）：已经获取到足够的媒体数据，但是当前播放位置没有有效的媒体数据（也就是说，获取到的媒体数据无效，不能播放）。
3. HAVE_CURRENT_DATA（数字值为2）：当前播放位置已经有数据可以播放，但没有获致到可以让播放器前进的数据。当媒体为视频时，意思是当前帖的数据已获取，但没有获取到下一帧的数据，或者当前帧已经是播放的最重一帧。
4. HAVE_FUTURE_DATA（数字值为3）：当前播放位置已经有数据可以播放，而且也获取到了可以让播放器前进的数据。当媒体为视频时，意思是当前帧的数据已获取，而且也获取到了下刺目贩数据，当前帧是播放的最后一帧时，readyState属性不可能为HAVE_FUTURE_DTAT。 HAVE_ENOUGH)DATA（数字值为4）：当前播放位置已经有数据可以播放，同时也获取到了可以让播放器前进的数据，而且浏览器确认媒体以某一种速度进行加载，可以保证有足够的后续数据进行播放。

3. 可读写属性

4. 常用事件

加载音频时按顺序触发下面的事件

还有如下常用事件：

其他未说明的可见 https://www.kancloud.cn/dennis/tgjavascript/241833

5. 常用方法

6. 兼容性测试

6.1 PC

机型 MacBook Pro (Retina, 13-inch, Early 2015)
系统 MacOS Mojave 10.14.5

6.2 iOS

机型 iPhone 8Plus
系统 iOS 12.3.2

6.3 Android

机型：Pixel XL
系统：Android 9.0.0

机型华为 P30
系统 Android 9 EMUI 9.1.0
由于测到一半测试机被测试拿回去了，所以只有一部分数据。。。。

7. 总结

目前 audio 的兼容性问题还是挺大的。
我们需要自己开发一个播放器时，需要考虑到以下几点：

1. 加载中
2. 播放进度
3. 播放状态
4. 结束状态
5. 错误处理

   7.1 加载中

   通常 canplay canplaythrough 标志缓冲完成可以播放，他们是比较好的结束加载中状态的时机。但是现在浏览器特别是移动端浏览器，对这它们的兼容性不是很好。主要是iOS 端微信微博几乎是把 preload 属性给干掉了，不使用特殊手法，不会在用户没有任何操作的情况下触发 canplay canplaythrough。
   对于微信，可以加载微信的 js-sdk。在 wx.ready 里触发自动播放来解决这个问题。

// 自动播放  微信 iOS 环境,不加此代码,则readyState状态一直为 1, 不受 preload 控制
wx.config({
  // 配置信息, 即使不正确也能使用 wx.ready
  debug: false,
  appId: '',
  timestamp: 1,
  nonceStr: '',
  signature: '',
  jsApiList: [],
})
wx.ready(function() {
  audioEle.play()
  audioEle.pause()
})

safari 浏览器设置 preload: auto 也不会触发 canplay canplaythrough, 可以调用下 audio 的 load 方法来 hack。

所以不建议在页面加载时就显示加载中的动画，防止有些特殊的 app 和浏览器无法在用户有操作前给到 canplay。可以在页面做好 hack，提前加载媒体信息，但是等到用户有操作后（比如点击播放按钮）再显示加载中。

另外加载中需要显示媒体时长，大部分手机在 durationchange 和 loadedmetadata 时都能获得正确的 duration 属性，但是测试时发现小米有一款手机在使用原生浏览器时，必须在实际播放后才能拿到正确的 duration，其他情况下都返回 0。这种情况可以在 canplay 后手动调用 play 来 hack。

// hack 小米原生浏览器第一次获取 duratiuon 为 0, 必须 play 后才能获取正确的 duration
audio.play()
audio.pause()

另外需要注意一点，canplay canplaythrough 在 chrome 和大部分安卓上，设置 currentTime 后也会触发，做好兼容。IOS 加载资源，服务器使用 HTTP 响应头 Accept-Ranges，Accept-Ranges: bytes。

video标签在iPhone手机上不能播放？万能的知乎大神请指引我，实在没办法了

7.2 播放进度

可以使用 timeupdate 事件，理论上在播放进度改变时这个事件就会触发，这个时候改变进度条就好了。
但是有些浏览器在 canplay 前设置 currentTime 不会触发 timeupdate，QQ 浏览器在有些手机上 canplay 后设置 currentTime 也不会触发，必须要播放过才行。所以如果需要做到在播放前就可以设置播放进度，需要考虑自己改变下进度条样式。

7.3 播放状态

监听 playing 和 pause 事件即可。
注意一点：pc chrome 上，设置 currentTime 会触发 palying pause。用户拖动进度条时，频繁修改 currentTime，按钮可能不能地在播放和暂停间切换，需要做好处理。

7.4 结束状态

ended 兼容性良好，目前没遇到什么坑。

7.5 错误处理

ended 兼容性良好，目前也没遇到什么坑。