视频音频

1. video标签

1.1 标签属性

• src 设置路径。

• width/height 设置标签的大小，类似于img，但是不会使视频文件拉伸。

• controls 无须值，有该属性则 显示视频控制面板。

• autoplay 无须值，有该属性则 自动播放。chrome为了用户体验不允许自动播放，但是允许静音下自动播放。

• muted 无须值，有该属性则 静音。

• loop 无须值，有该属性则 放完之后循环播放（默认是放完了停止）。

• poster 设置封面海报，需要指定一个图片地址。

• preload 设置页面加载后是否加载视频（当设置了autoplay时，此属性会被忽略）：

  • auto – 加载整个视频
  • metadata – 加载元数据（视频时长、尺寸大小等）
  • none – 不加载视频

1.2 相关API

• play() pause()

  播放、暂停。

• 属性

  duration — 视频总时长 currentTime — 当前时长 ended — 当前是否是播放完的状态 volume — 声音大小 （0~1 之间） defaultPlaybackRate — 播放速率（1.0正常速，最大2.0）

• 事件

  onplay — 播放时触发（不是持续性触发，每次播放触发一次） onpause — 暂停时触发 ontimeupdate — 播放进度发生改变时触发 onended — 播放结束时触发 oncanplay — 视频准备就绪，浏览器能够播放时触发

1.3 source

用于兼容，可以通过source指定多个播放源文件，浏览器会依次自动所支持的文件播放。

2. audio标签

与video标签基本一毛一样…… 当然，audio不支持 width、height，不支持海报poster，chrome也不支持静音播放（本来就听个响，都静音了还放啥）